HTML5 纯CSS3实现正方体旋转3D效果，零基础也能看得懂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D正方体</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 50px auto;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(45deg);
animation: rotate 5s infinite linear;
}
.box .face {
position: absolute;
width: 200px;
height: 200px;
background: #ff6347;
opacity: 0.5;
}
.box .front {
background: #ff6347;
}
.box .back {
background: #ffbb33;
transform: rotateY(180deg);
}
.box .right {
background: #ffff66;
transform: rotateY(90deg);
}
.box .left {
background: #66ff66;
transform: rotateY(-90deg);
}
.box .top {
background: #66ffff;
transform: rotateX(90deg);
}
.box .bottom {
background: #6666ff;
transform: rotateX(-90deg);
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>这段代码使用了HTML和CSS3，利用transform-style: preserve-3d;实现3D效果，并通过animation属性实现自动旋转。每个面都有不同的背景色，创建了一个立体的正方体效果。对于零基础的开发者来说，这是一个很好的学习示例，可以通过它了解如何使用CSS3创建3D动画。
评论已关闭