CSS |旋转（）函数

CSS中的旋转（）函数允许开发人员用超级简单的方法在元素周围绕特定轴线旋转，从而为网站增加动画效果。 它是转变元素外观和交互方式的必备工具之一。

语法

transform: rotate(angle);

angle可以使用deg(度)，rad(弧度)或turn(圈)作为单位。

示例

例如, 我们可以使用以下代码来将一个元素绕Y轴向右旋转30度:

#myDiv {
  transform: rotateY(30deg);
}

同样地，rotateX()函数将元素绕X轴旋转。以下代码将元素绕X轴向上旋转45度：

#myDiv {
  transform: rotateX(45deg);
}

元素还可以以任意度数旋转:

#myDiv {
  transform: rotate(90deg);
}

兼容性

在大多数现代浏览器中都支持旋转（）函数。 尽管一些老版本的浏览器可能不支持此属性或者在一些特定情况下支持不完全。

大体兼容情况：

• Chrome: 4.0+
• Firefox: 3.5+
• Safari: 3.1+
• Opera: 10.5+
• Internet Explorer: 9.0+

总结

transform: rotate()函数提供了一种非常简单的方式来创建动画效果。使用它，开发人员可以在元素周围绕特定轴线旋转，且可以兼容众多常用浏览器。试试它吧，为您的网站增加更多动态特效！