CSS3D效果，电梯上下运行效果
2023-03-29 本文已影响0人
空我我
微信图片_20230330140359.png
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: rgb(22, 21, 21);
}
.cuboid {
transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */
transform: rotateX(-30deg) rotateY(30deg);
}
.cuboid div {
width: 72px;
position: absolute;
opacity: 0.5; /* 半透明效果方便查看绘制情况 */
display: flex;
justify-content: center;
align-items: center;
outline: rgb(40, 226, 240) solid thick;
box-shadow: rgba(17, 123, 194, 0.712) 0 0 50px 50px;
}
.back {
height: 444px;
background-color: #9900ff;
transform: rotateY(180deg) translateZ(36px);
}
.right {
height: 444px;
background-color: #333333;
transform: rotateY(90deg) translateZ(36px);
}
.left {
height: 444px;
background-color: #00ff99;
transform: rotateY(-90deg) translateZ(36px);
}
.top {
height: 72px;
background-color: #0099ff;
transform: rotateX(90deg) translateZ(36px);
}
.bottom {
height: 72px;
background-color: #ffcc00;
transform: rotateX(-90deg) translateZ(410px);
}
.box {
height: 72px;
background-color: #ffcc00;
animation: ziZhuan linear 20s infinite;
animation-direction: alternate-reverse;
transition: all 0.5s;
}
@keyframes ziZhuan {
100% {
transform: rotateX(-90deg) translateZ(410px);
}
0% {
transform: rotateX(-90deg) translateZ(0);
}
}
.front {
height: 444px;
background-color: #ff5757;
transform: rotateY(0deg) translateZ(36px);
}
</style>
<script src="../../jquery.min.js"></script>
</head>
<body>
<div class="cuboid">
<div class="box"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="right"></div>
<div class="left"></div>
<div class="back"></div>
<div class="front"></div>
</div>
</body>
</html>
