CSS - rotate 属性

CSS 属性 rotate 可用于指定元素的旋转转换，与 transform 属性无关。

此属性便于接口使用，因为您无需记住在属性转换中要特定的顺序转换函数。

可能的值

CSS 属性 rotate 可以具有以下值之一：

angle 值：指定要旋转元素的<angle>值。等效于 rotate（） 2D 函数。
x, y, or z 轴名称加上 angle 值：确定需要旋转的元素周围的轴的名称（x、y 或 z 轴），以及确定旋转角度的角度值。相当于 3D 空间中的 rotateX（） / rotateY（） / rotateZ（）旋转函数。
向量加angle值：指定三个<number>，表示一个向量，向量是一条围绕需要旋转的线，以及确定旋转角度的角度值。等效于 3D 空间中的 rotate3d（）旋转函数。
none：指定不应用旋转。

适用于

所有可转换的元素。

语法


rotate = none | <angle> | [x | y | z | <number>{3} ] && <angle>

CSS rotate - 元素旋转

以下示例演示了如何使用 rotate CSS 属性，以及各种传递值的方法：


<html>
<head>
<style>
	 	.box {
	 	 	 display: inline-block;
	 	 	 margin: 0.7em;
	 	 	 min-width: 5.5em;
	 	 	 line-height: 6.5em;
	 	 	 text-align: center;
	 	 	 transition: 2s ease-in-out;
	 	 	 border: 2px solid black;
	 	 	 background-color: lightgreen;
	 	}

	 	#rotate-box:hover {
	 	 	 rotate: 60deg;
	 	}

	 	#rotate-x-box:hover {
	 	 	 rotate: x 180deg;
	 	}

	 	#rotate-vector:hover {
	 	 	 rotate: 0.8 1 0.5 360deg;
	 	}
</style>
</head>
<body>
	 	<h1>CSS Rotation Property</h1>
	 	<div class="box" id="rotate-box">rotate</div>
	 	<div class="box" id="rotate-x-box">rotate X</div>
	 	<div class="box" id="rotate-vector">vector with angle</div>
</body>
</html>

打印本页