实例：3D轮播卡片
技术栈：HTML+CSS
效果：
源码：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3D轮播卡片</title>
<link rel="stylesheet" href="../css/43.css">
</head>
<body>
<div class="container">
<div class="card-box">
<div class="card">
<img src="../images/op/1.jpg" alt="">
</div>
<div class="card">
<img src="../images/op/2.jpg" alt="">
</div>
<div class="card">
<img src="../images/op/3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
【css】
*{
/* 初始化 取消内外边距 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #000;
}
.container{
width: 300px;
height: 450px;
/* 这个属性用来增加卡片旋转的立体感 */
perspective: 1000px;
/* 相对定位 */
position: relative;
}
.card-box{
/* 绝对定位 */
position: absolute;
width: 100%;
height: 100%;
/* 给父元素加一个3D盒子属性 */
transform-style: preserve-3d;
transform: rotateY(0) translateZ(-700px);
/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
animation: cardRotate 10s cubic-bezier(0.77,0,0.175,1) infinite;
}
/* .card-box:hover{
animation-play-state: paused;
} */
.card{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* 设置元素的倒影效果，below是倒影效果在元素下方，15px是元素和倒影的距离，后面的属性是设置倒影渐变 */
-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%,rgba(255,255,255,0.3));
}
.card img{
width: 100%;
height: 100%;
}
.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);
}
}
