3D正方体旋转，当点击正方体时，正方体停止旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper{
/* width: 200px;
height: 200px;*/
margin-left: 200px;
margin-top: 200px;
position: relative;
perspective: 1600px; /*景深*/
}
@keyframes wang{
100% {
transform:rotateY(360deg) rotateX(360deg);
}
}
.content{
animation: wang 6s ease-in-out infinite;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 80px;
height: 200px;
width: 200px;
position: relative;
transform-style: preserve-3d; /*使子元素成3D显示*/
/*background: #000;*/
}
.content:hover{
animation-play-state: paused; /*鼠标移入暂停动画*/
}
.box{
opacity: 0.7;
position: absolute;
width: 200px;
height: 200px;
}
.before{
transform: translateZ(100px);
background-color: #fae48c;
}
.after{
transform: translateZ(-100px);
background-color: black;
}
.left{
transform: rotateY(-90deg) translateZ(100px);
background-color: #9900CC;
}
.right{
transform: rotateY(90deg) translateZ(100px);
background-color: yellow;
}
.up{
transform: rotateX(90deg) translateZ(100px);
background-color: green;
}
.down{
transform: rotateX(-90deg) translateZ(100px);
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="before box">1</div>
<div class="after box">2</div>
<div class="up box">3</div>
<div class="down box">4</div>
<div class="left box">5</div>
<div class="right box">6</div>
</div>
</div>
</body>
</html>
