css旋转效果制作

使用 transform 属性实现旋转

通过 CSS 的 transform 属性配合 rotate() 函数实现旋转效果。rotate() 接受角度值（如 45deg），正值为顺时针旋转，负值为逆时针旋转。

.element {
  transform: rotate(30deg);
}

添加过渡动画

使用 transition 属性让旋转过程更平滑。指定过渡属性（如 transform）和持续时间（如 1s）。

.element {
  transition: transform 0.5s ease-in-out;
}
.element:hover {
  transform: rotate(180deg);
}

无限旋转动画

通过 @keyframes 和 animation 实现持续旋转。定义关键帧动画并应用到元素上。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.element {
  animation: spin 2s linear infinite;
}

旋转中心点调整

默认旋转中心为元素中心，可通过 transform-origin 修改。支持像素值（20px 50px）或关键词（left top）。

.element {
  transform-origin: top right;
  transform: rotate(45deg);
}

3D 旋转效果

使用 rotateX()、rotateY() 或 rotateZ() 实现三维旋转。需配合 perspective 属性增强立体感。

.container {
  perspective: 1000px;
}
.element {
  transform: rotateX(45deg);
}

性能优化建议

避免频繁触发旋转动画导致重排。使用 will-change 提示浏览器优化渲染。

.element {
  will-change: transform;
}