旋转函数 rotate

Docs

transform-function - CSS：层叠样式表 | MDN (mozilla.org)

rotate() - CSS：层叠样式表 | MDN (mozilla.org)

• 旋转：rotate(<angle>)
• 值个数
  • 一个值时，表示旋转的角度
• 值类型：
  • 常用单位 deg：旋转的角度（degrees）
  • 正数为顺时针
  • 负数为逆时针

CSS 的 rotate() 函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转 180° 也被称为点反射。

元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用transform-origin属性设置自己的自定义变换原点。

语法

rotate() = rotate( [ <angle> | <zero> ] )

• <angle> 指定了 rotate() 的旋转程度。

  • 参数为正时，顺时针旋转；
  • 参数为负时，逆时针旋转。
  • 180° 旋转称为点反演。

CSS rotate 函数接受一个角度值作为参数，表示要旋转的角度。可以使用正数、负数、小数等形式来表示角度值，如 rotate(45deg) 表示将元素顺时针旋转 45 度，rotate(-30deg) 表示将元素逆时针旋转 30 度。

除了接受角度值之外，CSS rotate 函数还可以接受其他一些可选参数，用于指定旋转的中心点和旋转轴线。这些参数包括：

• rotateX(angle)：以 X 轴为轴线，将元素沿着该轴线旋转指定角度。
• rotateY(angle)：以 Y 轴为轴线，将元素沿着该轴线旋转指定角度。
• rotateZ(angle)：以 Z 轴为轴线（或者说是垂直于屏幕的轴线），将元素沿着该轴线旋转指定角度。
• rotate3d(x, y, z, angle)：以指定的 x、y、z 轴为轴线，将元素沿着该轴线旋转指定角度。其中 x、y、z 参数可以取 1 或 -1，分别表示正方向和负方向。