CSS 函数 - rotate3d（）

CSS 中的 rotate3d（） 函数用于在三维表面上围绕固定轴旋转元素，而不会引起任何变形。结果是 transform（）数据类型。

在三维空间（3D）中，旋转有三个自由度，统称为单轴旋转。该旋转轴由 [x， y， z] 向量定义，并由原点传递。

当向量未归一化时，即其三个坐标的平方和不是 1，则用户代理会在内部对其进行归一化。对于不可归一化的向量，例如空向量，即 [0， 0， 0]，旋转将被忽略，而不会使整个 CSS 属性失效。

可能的值

函数 rotate3d（） 接受四个值，即三个坐标值（x、y、z）和一个角度（a）。

x：一个数字，表示向量的 x 坐标，表示旋转轴。可以是正数或负数。
y：一个数字，表示向量的 y 坐标，表示旋转轴。可以是正数或负数。
z：一个数字，表示向量的 z 坐标，表示旋转轴。可以是正数或负数。
a：角度，表示旋转的角度。正角使元件顺时针方向旋转;而负角则将其逆时针方向旋转。

语法

函数 rotate3d（）由三个 <number> 和一个 <angle> 指定。向量的三个坐标（x、y、z）表示旋转轴，用 <number> 表示。<angle>表示当正向向旋转元素沿斜方向旋转时，当负方向逆时针旋转元素时，旋转角度。


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

CSS rotate3d（） - 正值和负值

以下是 rotate3d（） 函数的示例，其中有各种值作为参数，有正值和负值：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: lightblue;
	 	 	 margin-bottom: 1em;
	 	}

	 	.rotate-all-positive {
	 	 	 background-color: lightgreen;
	 	 	 transform: rotate3d(2, 1, 1, 45deg);
	 	}

	 	.rotate-all-negative {
	 	 	 background-color: tomato;
	 	 	 transform: rotate3d(-2, -1, -1, 45deg);
	 	}

	 	.rotate-mixed {
	 	 	 background-color: cyan;
	 	 	 transform: rotate3d(1,-2, 1, -60deg);
	 	}
</style>
</head>
<body>
	 	<div>No function</div>
	 	<div class="rotate-all-positive">
	 	 	 rotate3d(2,1,1,45deg) 	
	 	</div>
	 	<div class="rotate-all-negative">
	 	 	 rotate3d(-2,-1,-1,45deg) 	
	 	</div>
	 	<div class="rotate-mixed">
	 	 	 rotate3d(1,-2,-1,-60deg)
	 	</div>
</body>
</html>

CSS rotate3d（） - 在所有轴上单独旋转

以下是 rotate3d（） 函数的示例，分别显示了各个轴（x、y、z）上的旋转：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: peachpuff;
	 	 	 margin-bottom: 1em;
	 	}

	 	.rotate-x-axis {
	 	 	 background-color: lightgreen;
	 	 	 transform: rotate3d(1, 0, 0, 45deg);
	 	}

	 	.rotate-y-axis {
	 	 	 background-color: tomato;
	 	 	 transform: rotate3d(0, 1, 0, 45deg);
	 	}

	 	.rotate-z-axis {
	 	 	 background-color: lightblue;
	 	 	 transform: rotate3d(0, 0, 1, 45deg);
	 	}
</style>
</head>
<body>
	 	<div>No function</div>
	 	<div class="rotate-x-axis">
	 	 	 rotate3d(1,0,0,45deg) 	
	 	</div>
	 	<div class="rotate-y-axis">
	 	 	 rotate3d(0,1,0,45deg) 	
	 	</div>
	 	<div class="rotate-z-axis">
	 	 	 rotate3d(0,0,1,45deg) 	
	 	</div>
</body>
</html>

打印本页