CSS3 提供了 transform 属性，可以通过该属性实现元素的旋转效果。以下是一些 CSS3 旋转的实例学习，包括 2D 旋转和 3D 旋转。

1. 2D 旋转实例：

顺时针旋转：
.rotate-clockwise {
  transform: rotate(45deg);
}

逆时针旋转：
.rotate-counterclockwise {
  transform: rotate(-30deg);
}

根据中心轴旋转：
.rotate-center {
  transform-origin: center;
  transform: rotate(90deg);
}

2. 3D 旋转实例：

沿 X 轴旋转：
.rotate-3d-x {
  transform: rotateX(60deg);
}

沿 Y 轴旋转：
.rotate-3d-y {
  transform: rotateY(45deg);
}

沿 Z 轴旋转：
.rotate-3d-z {
  transform: rotateZ(30deg);
}

3D 立方体旋转：
.rotate-3d-cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}

这些示例演示了如何使用 CSS3 的 transform 属性进行旋转。你可以根据需要，调整旋转的角度、轴心等参数，创建出多样化的旋转效果。在实际应用中，旋转常用于创建动画、过渡效果或者增强页面交互体验。


转载请注明出处：http://www.zyzy.cn/article/detail/4077/CSS