HTML+CSS 3D旋转轮播图
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋转轮播图</title> <link rel="stylesheet" href="./43-3D旋转轮播图.css"> </head>
<body> <div class="container"> <div class="card-box"> <div class="card"> <img src="./images/1.jpg" alt=""> </div> <div class="card"> <img src="./images/2.jpg" alt=""> </div> <div class="card"> <img src="./images/3.jpg" alt=""> </div> </div> </div> </body>
</html> |
CSS:
|
* { margin: 0; padding: 0; }
body { 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%; 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; right: 0; top: 0; bottom: 0; width: 120%; height: 120%; display: flex; justify-content: center; align-items: center; -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); } } |
