css3的3d旋转，旋转的是元素还是坐标系？

Question

2d旋转好像只是旋转的元素，3d的看例子感觉好像是旋转的坐标系？

Answer 1

旋转，其实就是线性变换，可以理解为坐标轴旋转，也可以理解为坐标轴不动，点旋转

Answer 2

基于某一个点，向某一个方向旋转元素。所有具体还是旋转元素，实际上就是ps里面的旋转是一样的。

Answer 3

做了一个demo

https://codepen.io/xboxyan/pe...

这里做了适当的旋转，以便能看到所有的面

注意里面变换的时候选择的transform-origin

css3的变换本质上是矩阵的运算，有先后顺序

按照道理来讲，每一次变换都会会以元素本身为基准

实际在网页上观察，由于是3d变换，我们通常会在父级（舞台）加上

{
    transform-style: preserve-3d;
    perspective: 850px; /*经验值，距离屏幕观察的距离*/
}

所以，从视觉上，从屏幕向外移动多少距离，其实是没法直接测量出来的，只能大概的看出来离观察者更近了（近大远小）

角度也没法直接测量，和观察者的角度有关，就算你是垂直于屏幕，但是如果视角从斜上方往下看，也是能看到这个div的