角度 CSS 中的图像

CSS 中的图像可以通过 angle 值来实现进行旋转。

angle 值

angle 值是度量角度的单位，常见的单位有 deg (度)、rad (弧度)、grad (梯度)、turn (圆周)。

在 CSS 中，angle 值可以作为 transform 属性中的 rotate() 函数的参数，通过改变角度值来控制图像的旋转。

rotate() 函数

rotate() 函数可以实现图像的旋转，其参数是一个 angle 值，表示顺时针方向旋转的度数。如果是负值，则为逆时针方向旋转。

语法

transform: rotate(angle);

示例

img {
  transform: rotate(30deg);
}

transform-origin 属性

transform-origin 属性可以定义元素变换的原点，也就是图像的旋转中心。

语法

transform-origin: x-axis y-axis z-axis;

其中， x-axis 和 y-axis 用于表示水平和垂直方向上的偏移，可以使用长度或百分比进行定义。z-axis 用于定义深度方向的偏移，通常不用设置，默认值是中心点。

示例

img {
  transform: rotate(30deg);
  transform-origin: center center;
}

图像反转

除了旋转，CSS 还提供了 scaleX()、scaleY()、scale() 函数，可以实现图像的水平、垂直反转。

语法

transform: scaleX(-1); /* 水平反转 */
transform: scaleY(-1); /* 垂直反转 */ 
transform: scale(-1); /* 水平和垂直同时反转 */

总结

通过 angle 值和 transform 函数，可以轻松实现图像的旋转和反转。对于网页设计来说，这些功能可以增加页面的趣味性和美感。