这段代码通过纯CSS实现了一个动态的3D立方体动画，立方体在旋转的同时，每个侧面的文字会动态变化位置。整体效果生动有趣，适合用于动画展示或创意页面。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>公众号关注：前端Hardytitle>
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: 120px0;
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);
}
.sidespan {
position: relative;
display: block;
}
.backspan {
animation: back 15s linear infinite;
}
.topspan {
animation: top 15s linear infinite;
}
.bottomspan {
animation: bottom 15s linear infinite;
}
.frontspan {
animation: front 15s linear infinite;
}
.guides {
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100%;
border-style: dotted;
border-width: 01px;
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：分别为每个侧面的文字定义动画，使其在立方体旋转时动态变化位置。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
