基础知识：CSS 3D变换

transform属性

transform属性可以应用于任何元素，用于修改元素的形状、大小、位置等。以下是一些常用的transform属性：

  • rotateX()：绕X轴旋转元素。
  • rotateY()：绕Y轴旋转元素。
  • rotateZ()：绕Z轴旋转元素。
  • scaleX()、scaleY()、scaleZ()：分别沿着X轴、Y轴、Z轴进行缩放。

animation属性

animation属性允许我们定义一组关键帧，然后通过动画名称、持续时间、动画速度、延迟时间、迭代次数等属性来控制动画的播放。

实现图片360°旋转

HTML结构

<div class="rotate-image">
  <img src="example.jpg" alt="旋转的图片">
</div>

CSS样式

.rotate-image {
  perspective: 1000px; /* 设置视场角度，增加立体感 */
}

.rotate-image img {
  width: 300px; /* 设置图片宽度 */
  height: auto; /* 高度自适应 */
  animation: rotate 10s infinite linear; /* 设置旋转动画 */
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

解释

  • perspective属性设置了视场角度，使得旋转效果更加立体。
  • animation属性定义了旋转动画，包括动画名称rotate、持续时间10s、无限循环infinite和动画速度linear。
  • @keyframes规则定义了动画的关键帧，从0deg旋转到360deg。

总结