                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

tranform-origin在3D中改变的到底是什么？

tranform-origin在2D变化中我知道改变的是元素的旋转点，是基于元素本身的盒子。比如50% 50%是元素盒子的中点。但是在3D变化中，50% 50%还是元素盒子的中点吗？不是了吧？我看http://www.runoob.com/try/try.php?filename=trycss3_transform-origin_3d_inuse例子，如果是元素盒子中点，那rotateY旋转时中心点应该不动，而实际上是绕着浏览器的Y轴旋转了。不知道我说清楚了没有，请大家指点我一下

qq_Up_2

2016-04-24

源自：CSS3 3D 特效

关注问题我要回答

1283

操作

收起

2 回答

慕的地3472395
2016-05-15

上面草率的回答有误，经过自己的实践发现，transform-origin在3d旋转中起着确定x轴、y轴的作用。transform-origin：value1 value2；则value1（x轴不动时与y轴交点的x值，即y轴可移动）决定了y轴的位置，默认为50%，元素中心竖线。value2同理，决定了x轴的位置。通过改变两个值，旋转正方体即可验证。

1 回复有任何疑惑可以回复我~

收起回答

慕的地3472395
2016-05-15

2d变换因为是平面的，可以有旋转中心。而3d变化中，是以轴为参考的，实现任意旋转是通过绕x轴、y轴和z轴这三个子效果实现的。因为你要实现任意旋转，3d旋转的旋转中心是很难找的，或者不存在，你能说出一个div绕x轴旋转90度，它的旋转中心在哪吗。所以我个人认为transform在3d旋转中没用，在3d缩放中应该有用，可自己试试看！不必纠结这个问题了