一、HTML结构搭建

首先，我们需要构建基本的HTML结构。以下是一个简单的旋转相册的HTML结构示例：

<div class="gallery">
  <img src="img/1.jpg" alt="Image 1">
  <img src="img/2.jpg" alt="Image 2">
  <img src="img/3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

二、CSS样式设置

.gallery img {
  width: 100px;
  height: 100px;
  margin: 10px;
  transition: transform 0.5s ease-in-out;
}

.gallery img:hover {
  transform: rotateY(360deg);
}

三、深入解析

1. transform属性

transform属性是实现旋转效果的核心。它允许我们对元素进行2D或3D变换，包括旋转、缩放、倾斜等。以下是一些常用的transform属性值：

  • rotateX(角度): 绕X轴旋转
  • rotateY(角度): 绕Y轴旋转
  • rotateZ(角度): 绕Z轴旋转
  • scaleX(数值): 水平方向缩放
  • scaleY(数值): 垂直方向缩放
  • skewX(角度): 水平方向倾斜
  • skewY(角度): 垂直方向倾斜

2. transform-origin属性

transform-origin属性用于控制旋转的中心点。默认情况下，旋转中心点是元素的中心。但我们可以通过transform-origin属性来改变这个中心点。以下是一些常用的transform-origin属性值：

  • top left: 左上角
  • top right: 右上角
  • bottom left: 左下角
  • bottom right: 右下角
  • center: 中心点

3. animation属性

animation属性用于定义动画效果。它允许我们设置动画的名称、时长、延迟、迭代次数等。以下是一个简单的animation属性示例：

.gallery img {
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这个例子中，我们为.gallery类下的所有img元素设置了一个名为rotate的动画，该动画在2秒内无限次地旋转360度。

四、总结