这段代码创建了一个 3D 图片轮播效果,其中包含 8 张图片。图片在 3D 空间中围绕 Y 轴旋转,形成一个循环的轮播效果。CSS 的@keyframes 动画定义了图片的旋转路径,而 transform-style: preserve-3d 属性确保了 3D 效果的正确显示。每张图片通过不同的 rotateY 和 translateZ 属性定位在 3D 空间中的不同位置。
演示效果
CSS部分显示 .container {
position: relative;
margin-top: 50px;
}
.stage {
position: relative;
width: 800px;
height: 240px;
margin: 20px auto;
perspective: 2000px;
transform-style: preserve-3d;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(239, 179, 213, 0.8));
}
.stage .control {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
animation: rotate 30s linear infinite;
}
.stage .control .imgWrap {
position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
}
.stage .control .imgWrap .img {
position: absolute;
width: 500px;
height: 400px;
line-height: 400px;
text-align: center;
font-size: 120px;
top: 0;
left: 0;
object-fit: cover;
transform-style: preserve-3d;
transform-origin: 50% 50% 0px;
}
HTML部分显示 <div class="container">
<div class="stage">
<div class="control">
<div class="imgWrap">
<div class="img img1">
<img src="./img/p1.jpg" />
</div>
<div class="img img2">
<img src="./img/p2.jpg" />
</div>
<div class="img img3">
<img src="./img/p3.jpg" />
</div>
<div class="img img4">
<img src="./img/p4.jpg" />
</div>
<div class="img img5">
<img src="./img/p5.jpg" />
</div>
<div class="img img6">
<img src="./img/p6.jpg" />
</div>
<div class="img img7">
<img src="./img/p7.png" />
</div>
<div class="img img8">
<img src="./img/p8.png" />
</div>
</div>
</div>
</div>
</div>
HTML 结构
container:主容器,用于居中显示舞台(stage)。
stage:舞台,用于创建 3D 效果的容器。
control:控制容器,包含所有图片,并在 3D 空间中旋转。
imgWrap:图片包装器,用于包含所有图片元素。
img img1 至 img img8:每个类名为 img 的 div 元素包含一个图片,并通过不同的 imgX 类来区分和定位。
CSS 样式
body:设置页面的显示方式、外边距和背景色。
.container:设置容器的位置和外边距。
.stage:设置舞台的尺寸、位置、透视和 3D 样式。
.stage .control:设置控制容器的尺寸、3D 样式和动画。
.stage .control .imgWrap:设置图片包装器的位置和 3D 样式。
.stage .control .imgWrap .img:设置图片的尺寸、位置和 3D 样式。
.stage .control .imgWrap img:设置图片的尺寸和圆角。
.stage .control .imgWrap .img1 至.stage .control .imgWrap .img8:为每张图片设置不同的 3D 旋转和位置。
@keyframes rotate:定义一个关键帧动画,用于控制图片轮播的旋转效果。
完整代码下载
夸克网盘UC网盘 |