[分享]css3怎么改变3d旋转原点

CSS3的3D旋转效果可以为网页添加更加生动的界面效果，但是在使用过程中会发现3D旋转的物体并不是绕着中心点旋转，而是围绕着默认的原点旋转，这时候我们就需要改变3D旋转的原点了。transformor...

CSS3的3D旋转效果可以为网页添加更加生动的界面效果，但是在使用过程中会发现3D旋转的物体并不是绕着中心点旋转，而是围绕着默认的原点旋转，这时候我们就需要改变3D旋转的原点了。

transform-origin: x-axis y-axis z-axis; 

其中x-axis，y-axis和z-axis是指定旋转的轴线，我们可以使用如下的一些值：

• left：元素的左边缘为x轴
• center：元素的中心点为x轴
• right：元素的右边缘为x轴
• top：元素的顶部为y轴
• bottom：元素的底部为y轴
• center：元素的中心点为y轴
• length：给定一个长度值，可以为负数
• percentage：给定一个百分比，相对于元素自身尺寸

其中，如果只指定单个值，则其余两个值默认为50%。如果只指定长度或百分比，则z轴默认为0。

下面是一个例子，可以将div元素绕着它的底部中心点旋转：

transform: rotateX(45deg) rotateY(45deg);
transform-origin: center bottom; 

这样，就可以改变元素的3D旋转原点了。