HTML&CSS ：必学！打造 3D 立方体动画

玄之 · 发表于昨天 09:06

这段代码通过纯CSS实现了一个动态的3D立方体动画，立方体在旋转的同时，每个侧面的文字会动态变化位置。整体效果生动有趣，适合用于动画展示或创意页面。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.scene {
width: 300px;
height: 300px;
margin: 100px auto 0;
perspective: 1200px;
}
.cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: translateZ(-150px) rotateX(0deg);
animation: example 15s linear infinite;
}
.side {
position: absolute;
width: 300px;
height: 300px;
box-sizing: border-box;
background-color: #999;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 120px 0;
font: 60px/1 'Trebuchet MS', sans-serif;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.side::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
}
.side span {
position: relative;
display: block;
}
.back span {
animation: back 15s linear infinite;
}
.top span {
animation: top 15s linear infinite;
}
.bottom span {
animation: bottom 15s linear infinite;
}
.front span {
animation: front 15s linear infinite;
}
.guides {
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100%;
border-style: dotted;
border-width: 0 1px;
color: rgba(255, 255, 255, 0.6);
}
.guides::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-left: 1px dotted;
}
.back {
transform: translateZ(-150px) rotateX(180deg);
}
.top {
transform: translateY(-150px) rotateX(90deg);
}
.bottom {
transform: translateY(150px) rotateX(270deg);
}
.front {
transform: translateZ(150px);
}
.back {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/back.jpg);
}
.top {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/top.jpg);
}
.bottom {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/bottom.jpg);
}
.front {
background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/front.jpg);
}
@keyframes example {
0% {
transform: translateZ(-150px) rotateX(0deg);
}
15% {
transform: translateZ(-150px) rotateX(90deg);
}
25% {
transform: translateZ(-150px) rotateX(90deg);
}
40% {
transform: translateZ(-150px) rotateX(180deg);
}
50% {
transform: translateZ(-150px) rotateX(180deg);
}
65% {
transform: translateZ(-150px) rotateX(270deg);
}
75% {
transform: translateZ(-150px) rotateX(270deg);
}
90% {
transform: translateZ(-150px) rotateX(360deg);
}
100% {
transform: translateZ(-150px) rotateX(360deg);
}
}
@keyframes front {
0% {
transform: translateY(0px)
}
15% {
transform: translateY(-100px);
}
25% {
transform: translateY(-100px);
}
40% {
transform: translateY(0px);
}
50% {
transform: translateY(0px);
}
65% {
transform: translateY(100px);
}
75% {
transform: translateY(100px);
}
90% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
@keyframes bottom {
0% {
transform: translateY(100px)
}
15% {
transform: translateY(0px);
}
25% {
transform: translateY(0px);
}
40% {
transform: translateY(-100px);
}
50% {
transform: translateY(-100px);
}
65% {
transform: translateY(0px);
}
75% {
transform: translateY(0px);
}
90% {
transform: translateY(100px);
}
100% {
transform: translateY(100px);
}
}
@keyframes back {
0% {
transform: translateY(0px)
}
15% {
transform: translateY(100px);
}
25% {
transform: translateY(100px);
}
40% {
transform: translateY(0px);
}
50% {
transform: translateY(0px);
}
65% {
transform: translateY(-100px);
}
75% {
transform: translateY(-100px);
}
90% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
@keyframes top {
0% {
transform: translateY(-100px)
}
15% {
transform: translateY(0px);
}
25% {
transform: translateY(0px);
}
40% {
transform: translateY(100px);
}
50% {
transform: translateY(100px);
}
65% {
transform: translateY(0px);
}
75% {
transform: translateY(0px);
}
90% {
transform: translateY(-100px);
}
100% {
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="side back">
<div class="guides"></div>
<span>发</span>
</div>
<div class="side top">
<div class="guides"></div>
<span>财</span>
</div>
<div class="side bottom">
<div class="guides"></div>
<span>喜</span>
</div>
<div class="side front">
<div class="guides"></div>
<span>恭</span>
</div>
</div>
</div>
</body>
</html>

复制代码

HTML 结构

scene：整个3D场景的容器，用于设置透视效果（perspective）。
cube：立方体的容器，包含四个侧面（front、back、top、bottom）。
side：立方体的每个侧面，分别表示立方体的前面、后面、顶部和底部。
guides：辅助线，用于指示每个侧面的中心位置。
span：每个侧面的文字内容。

CSS 样式

body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
.scene：定义3D场景的容器，设置宽高和透视效果。
.cube：定义立方体的样式，包括宽高、3D变换和动画（example）。
.side：定义立方体每个侧面的样式，包括宽高、背景颜色和文字样式。
.side::before：为每个侧面添加半透明的覆盖层，增强视觉效果。
.side span：定义侧面文字的样式，使其居中显示。
.back、.top、.bottom、.front：分别定义立方体的后面、顶部、底部和前面的样式，包括背景图片和3D变换。
.guides：定义辅助线的样式，用于指示每个侧面的中心位置。
@keyframes example：定义立方体的旋转动画，使立方体在X轴上循环旋转。
@keyframes front、@keyframes top、@keyframes bottom、@keyframes back：分别为每个侧面的文字定义动画，使其在立方体旋转时动态变化位置。