HTML+CSS实现旋转立方体
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: rgb(224, 223, 223);
}
.box {
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: run 25s linear infinite;
margin: 200px auto;
}
.box div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
border: 1px solid black;
}
img {
width: 100%;
width: 100%;
}
.box .top {
transform: translateY(-100px) rotateX(90deg);
}
.box .bottom {
transform: translateY(100px) rotateX(90deg);
}
.box .left {
transform: translateX(-100px) rotateY(90deg);
}
.box .right {
transform: translateX(100px) rotateY(90deg);
}
.box .front {
transform: translateZ(100px);
}
.box .back {
transform: translateZ(-100px);
}
@keyframes run {
0% {}
100% {
transform: rotateX(720deg) rotateY(360deg);
}
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<div class="top"><img src="img/1.png" alt=""></div>
<div class="bottom"><img src="img/2.png" alt=""></div>
<div class="left"><img src="img/3.png" alt=""></div>
<div class="right"><img src="img/4.png" alt=""></div>
<div class="front"><img src="img/5.png" alt=""></div>
<div class="back"><img src="img/6.png" alt=""></div>
</div>
</body>
</html>
不需要鼠标放上去停止效果可以删除掉 animation-play-state: paused;
感谢各位的阅读,更多文章请前往九天小窝。