3d盒子

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3d盒子（动画）</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="container">
		<div class="inner">A</div>
		<div class="inner">B</div>
		<div class="inner">C</div>
		<div class="inner">D</div>
		<div class="inner">E</div>
		<div class="inner">F</div>
	</div>
</body>
</html>

index.css

.container{
	width: 300px;
	height: 300px;
	position: absolute;
	left:50%;
	top:50%;
	margin-top: -150px;
	margin-left: -150px;
	transform-style: preserve-3d;
	/*perspective: 1000px;*/
	transform:rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
.container:hover{
	animation:dh 5s ease-in-out infinite;
	cursor: pointer;
}
.inner{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 0;
	top:0;
	background: rgba(255,0,0,.1);
	line-height: 300px;
	text-align: center;
	font-size: 30px;
	color: #FFF;
}
.inner:nth-child(1){
	transform:translateZ(-150px);
}
.inner:nth-child(2){
	transform:translateZ(150px);
}
.inner:nth-child(3){
	transform:translateY(150px) rotateX(90deg);
}
.inner:nth-child(4){
	transform:translateY(-150px) rotateX(90deg);
}
.inner:nth-child(5){
	transform: translateX(150px) rotateY(
90deg);
}
.inner:nth-child(6){
	transform: translateX(-150px) rotateY(
90deg);
}
@keyframes dh{
	0%{
		transform:rotateX(0) rotateY(0) rotateZ(0);
	}
	100%{
		transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}

学习资料