css3动画旋转参考点 |两个文件内容整合 css

在CSS3中，旋转参考点默认为元素的中心点。如果需要改变旋转参考点，可以使用transform-origin属性。该属性可以接受如下语法值：

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

其中value可以是以下值之一：

• top
• left
• center
• right
• bottom

x-axis和y-axis可以是长度值（如px、em、rem等），也可以是百分比值，表示相对于元素自身宽高的比例。z-axis是一个长度值，表示元素沿着z轴方向的偏移量。

例如，以下代码会让一个矩形绕着左下角旋转：

div {
width: 200px;
height: 100px;
background-color: red;
transform-origin: left bottom;
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

需要注意的是，旋转参考点只会影响旋转效果，而不会影响元素的位置。如果需要改变元素的位置，需要使用其他属性如position、top、left等。

通过改变旋转参考点的位置，大家可以实现更加丰富的旋转效果。例如以下代码会让一个图片以其左上角为旋转中心，绕着自身Y轴偏移60像素的位置旋转：

img {
width: 200px;
transform-origin: left top 60px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

在实际项目中，大家可以结合JS动态修改元素的旋转参考点，实现更加动态的旋转效果。