css3 旋转轴 |css3水波背景动态

transform: rotate(angle);

使用CSS3中的 transform 属性可以达到图像旋转的效果，其中 angle 是旋转的角度值。不过，这种旋转方式仅限于图像的2D旋转效果。想要更加复杂的效果，就需要加入旋转轴的概念。

transform: rotate3d(x, y, z, angle);

CSS3中的 rotate3d() 函数可以实现以x，y，z为轴旋转的效果。参数 angle 表示旋转的角度，x，y，z分别表示x轴、y轴和z轴的值。如果将x，y，z设为0，就相当于将图像绕着中心点旋转。如果想要实现更加复杂的旋转效果，可以尝试使用旋转轴。

transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle);

使用CSS3中的 rotateX()、rotateY()、rotateZ() 函数可以实现不同方向的3D旋转。rotateX() 和 rotateY() 的参数 angle 表示旋转的角度，而 rotateZ() 的参数是固定的，设为0。

在使用CSS3的旋转轴时，可以通过指定以下几种属性实现更加复杂的旋转效果：

transform-origin: x y z;
transform-style: preserve-3d;
perspective: value;
backface-visibility: hidden;

transform-origin 属性可以改变旋转的中心点，而 transform-style 属性则用于指定旋转所使用的坐标系，preserve-3d 表示使用3D坐标系。perspective 属性用于改变元素的视角，backface-visibility 属性则用于控制从背面看时是否可见。

CSS3的旋转轴是一个非常强大的功能，它可以实现非常复杂的3D效果，提升网页的质量和页眉，使得用户体验更加流畅。