3D几何体旋转

css动画中，transform与transition动画常常可以设置3D动画，以下例子是3D旋转的具体代码，希望对大家有帮助。。。。。。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>3D几何体</title>
		<style type="text/css">
			.out {
				width: 300px;
				height: 300px;
				margin: 100px auto;
				position: relative;
				/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。注释：perspective 属性只影响 3D 转换元素。*/
				perspective: 1200px;
			}
			/*定义盒子包含框样式*/
			
			.wrapper {
				/*transform--style属性指定嵌套元素是怎样在三维空间中呈现。注意： 使用此属性必须先使用 transform 属性.*/
				transform-style: preserve-3d;
			}
			/*定义六个面的公共样式*/
			
			.wall {
				background: rgba(255, 0, 0, 0.5);
				border: 1px solid black;
				font-size: 30px;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				height: 200px;
				line-height: 200px;
				width: 200px;
				position: absolute;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
			}
			/*定义每个面样式*/
			.front {
				transform: translateZ(100px);
			}
			
			.back {
				transform: rotateX(180deg) translateZ(100px);
			}
			
			.left {
				transform: rotateY(-90deg) translateZ(100px);
			}
			
			.right {
				transform: rotateY(90deg) translateZ(100px);
			}
			
			.top {
				transform: rotateX(90deg) translateZ(100px);
			}
			
			.bottom {
				transform: rotateX(-90deg) translateZ(100px);
			}
			/*定义关键帧动画*/
			
			@keyframes abc {
				from {
					transform: rotateY(0deg);
				}
				to {
					transform: rotateY(360deg);
				}
			}
			/*鼠标移入后执行动画*/
			.wrapper:hover {
				animation: abc 3s linear infinite;
			}
		</style>
	</head>

	<body>
		<div class="out">
			<div class="wrapper">
				<div class="wall front">front</div>
				<div class="wall back">back</div>
				<div class="wall left">left</div>
				<div class="wall right">right</div>
				<div class="wall top">top</div>
				<div class="wall bottom">bottom</div>
			</div>
		</div>
	</body>

</html>
效果如下：
猜你喜欢
