CSS3 3D旋转效果-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109148997

1. CSS3 transform属性

1.1. transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1.2. 默认值

1.3. 可能值

2. rotate3d(x,y,z,angle)方法

2.1. rotate3d(x,y,z,angle)定义3D旋转。

2.2. x: 是一个0到１之间的数值, 主要用来描述元素围绕X轴旋转的矢量值;一般我们写0或者1, 0代表X轴方向不旋转, 1代表X轴方向旋转。

2.3. y: 是一个0到１之间的数值, 主要用来描述元素围绕Y轴旋转的矢量值;一般我们写0或者1, 0代表Y轴方向不旋转, 1代表Y轴方向旋转。

2.4. z: 是一个0到１之间的数值, 主要用来描述元素围绕Z轴旋转的矢量值;一般我们写0或者1, 0代表Z轴方向不旋转, 1代表Z轴方向旋转。

2.5. angle: 是一个角度值, 主要用来指定元素在3D空间旋转的角度, 如果其值为正值表示元素顺时针旋转, 为负值表示元素逆时针旋转。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 3D旋转</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
			    width: 90px;
			    height: 70px;
			    border: 1px solid #000000;
				border-radius: 5px;
				margin: 30px 20px;
			   	padding: 10px;
				float: left; 
			    background: red;
			    color: white;
			    font-weight: bold;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div onmouseover="rotate()" id="rotate">2D rotate</div>
		<div onmouseover="rotateX()" id="rotateX">3D rotateX</div>
		<div onmouseover="rotateY()" id="rotateY">3D rotateY</div>
		<div onmouseover="rotateZ()" id="rotateZ">3D rotateZ</div>
		<div onmouseover="rotate3d()" id="rotate3d">3D rotate3d</div>

		<script type="text/javascript">
			var n = 0, x = 0, y = 0, z = 0, r3d = 0, rotateInterval, rotateXInterval, rotateYInterval, rotateZInterval, rotate3dInterval;

			function rotate() {
				clearInterval(rotateInterval);
				rotateInterval = setInterval("startRotate()", 10);
			}
			function startRotate(){
				document.getElementById("rotate").style.transform = "rotate(" + ++n + "deg)";

				if (n == 180 || n == 360) {
					clearInterval(rotateInterval);
				}

				if (n >= 360) {
					n = 0;
				}
			}

			function rotateX() {
				clearInterval(rotateXInterval);
				rotateXInterval = setInterval("startRotateX()", 10);
			}
			function startRotateX(){
				document.getElementById("rotateX").style.transform = "rotateX(" + ++x + "deg)";

				if (x == 180 || x == 360) {
					clearInterval(rotateXInterval);
				}

				if (x >= 360) {
					x = 0;
				}
			}

			function rotateY() {
				clearInterval(rotateYInterval);
				rotateYInterval = setInterval("startRotateY()", 10);
			}
			function startRotateY(){
				document.getElementById("rotateY").style.transform = "rotateY(" + ++y + "deg)";

				if (y == 180 || y == 360) {
					clearInterval(rotateYInterval);
				}

				if (y >= 360) {
					y = 0;
				}
			}

			function rotateZ() {
				clearInterval(rotateZInterval);
				rotateZInterval = setInterval("startRotateZ()", 10);
			}
			function startRotateZ(){
				document.getElementById("rotateZ").style.transform = "rotateZ(" + ++z + "deg)";

				if (z == 180 || z == 360) {
					clearInterval(rotateZInterval);
				}

				if (z >= 360) {
					z = 0;
				}
			}

			function rotate3d() {
				clearInterval(rotate3dInterval);
				rotate3dInterval = setInterval("startRotate3d()", 10);
			}
			function startRotate3d(){
				document.getElementById("rotate3d").style.transform = "rotate3d(1, 1, 1, " + ++r3d + "deg)";

				if (r3d == 180 || r3d == 360) {
					clearInterval(rotate3dInterval);
				}

				if (r3d >= 360) {
					r3d = 0;
				}
			}
		</script>
	</body>
</html>

3.2. 效果图

044_CSS33D转换