Css3 3D立方体盒子小实例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D立体小实例</title>
		<style>
			*{
					margin: 0px;
					padding: 0px;
				}
			    .container{
					width: 400px;
					height: 400px;
					margin: 200px auto;
					box-shadow: 0 0 10px 0 #000;
					border: 1px solid transparent;
					perspective: 800px;
				}
				.Box{
					position: relative;
					width: 200px;
					height: 200px;
					margin: 100px 50px 100px 150px;
					transform-style: preserve-3d;
				    animation: box1 5s infinite alternate; 
				}			
				 .Box p{
					position: absolute;
					width: 200px;
					height: 200px;
					text-align: center;
					box-shadow: 0 0 10px #FF0000;
				}
				 p:nth-child(1){
					
				}
				 p:nth-child(2){
					transform:translateZ(-200px);
				}
				 p:nth-child(3){
					left: 200px;
					transform-origin: left;
					transform: rotateY(90deg);
				}
				 p:nth-child(4){
					left: -200px;
					transform-origin: right;
					transform: rotateY(-90deg);
				}
				 p:nth-child(5){
					top: 200px;
					transform-origin: top;
					transform: rotateX(-90deg);
				}
				 p:nth-child(6){
					top: -200px;
					transform-origin: bottom;
					transform: rotateX(90deg);
					animation: Bbox 5s infinite alternate
				}
				@keyframes Bbox{
					to{
						transform: translateZ(100px) rotateX(0deg);
					}
				}
				@keyframes box1{
					to {
						transform: rotateY(80deg);
					}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="Box">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			</div>
		</div>
	</body>
</html>

结果运行图：

Css3 3D立方体盒子小实例
注意：perspective属性一定要放到最原始的父类盒子中，不然会产生側边倾斜的效果，其外，3D设计且误随手设计，最好先从2D展开面设计，再通过旋转进行拼接，动画设置可以通过事件或则@keyframes动画规则属性进行设定（CSS动画本质为样式的切换）

Css3 3D立方体盒子小实例

相关推荐