HTML+CSS：3D轮播卡片

效果演示

33 3D轮播卡片.gif

实现了一个3D翻转的卡片动画，其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放，无限次。整个页面的背景是一个占据整个屏幕的背景图片，并且页面内容被隐藏在背景图片之下。

Code

<div class="container"><div class="card-box"><div class="card"><img src="./img/鞠婧祎04.jpg"></div><div class="card"><img src="./img/章若楠01.jpg"></div><div class="card"><img src="./img/鞠婧祎02.jpg"></div></div>
</div>

body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;overflow: hidden;
}* {margin: 0;padding: 0;
}.container {width: 600px;height: 350px;margin-top: 60px;perspective: 1000px;position: relative;
}.card-box {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateY(0) translateZ(-700px);animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}.card {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}.card img {width: 100%;height: 100%;border-radius: 10px;
}.card:nth-child(1) {transform: rotateY(0) translateZ(700px);
}.card:nth-child(2) {transform: rotateY(120deg) translateZ(700px);
}.card:nth-child(3) {transform: rotateY(240deg) translateZ(700px);
}@keyframes cardRotate {0%,20% {transform: translateZ(-700px) rotateY(0);}45% {transform: translateZ(-700px) rotateY(-120deg);}75% {transform: translateZ(-700px) rotateY(-240deg);}100% {transform: translateZ(-700px) rotateY(-360deg);}
}

实现思路拆分

body {height: 100vh; /* 设置页面高度为视口高度 */display: flex; /* 使用弹性布局 */justify-content: center; /* 居中水平 */align-items: center; /* 居中垂直 */background-color: #e8e8e8; /* 设置背景颜色 */overflow: hidden; /* 隐藏溢出部分 */
}

这段代码设置了页面的基本样式，包括高度、居中、背景颜色和溢出部分的隐藏。

* {margin: 0;padding: 0;
}

这段代码取消了所有的内外边距，使得页面更加整洁。

.container {width: 600px; /* 设置容器宽度 */height: 350px; /* 设置容器高度 */margin-top: 60px; /* 设置容器与页面顶部的距离 */perspective: 1000px; /* 设置容器的透视效果 */position: relative; /* 设置容器为相对定位 */
}

这段代码设置了容器的基本样式，包括宽度、高度、与页面顶部的距离、透视效果和相对定位。

.card-box {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateY(0) translateZ(-700px);animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

这段代码设置了卡片盒子的基本样式，包括绝对定位、宽度、高度、3D效果、动画效果和无限次播放。

.card {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
}

这段代码设置了卡片的基本样式，包括绝对定位、宽度、高度、倒影效果。

.card img {width: 100%;height: 100%;border-radius: 10px;
}

这段代码设置了卡片图片的基本样式，包括宽度、高度和圆角。

.card:nth-child(1) {transform: rotateY(0) translateZ(700px);
}.card:nth-child(2) {transform: rotateY(120deg) translateZ(700px);
}.card:nth-child(3) {transform: rotateY(240deg) translateZ(700px);
}

这段代码设置了每张卡片的初始位置和旋转角度。

@keyframes cardRotate {0%,20% {transform: translateZ(-700px) rotateY(0);}45% {transform: translateZ(-700px) rotateY(-120deg);}75% {transform: translateZ(-700px) rotateY(-240deg);}100% {transform: translateZ(-700px) rotateY(-360deg);}
}