<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: black;
perspective: 1500px;
}
.container{
height: 200px;
width:350px;
position: relative;
transform-style: preserve-3d;
animation: action 30s linear infinite;
cursor: pointer;
}
.container:hover{
animation-play-state:paused ;
/* 暂停 */
}
.container .item{
width:100%;
height:100%;
position: absolute;
-webkit-box-reflect: below 15px linear-gradient(transparent 10%,rgba(255,255,255,0.3));/* 倒影 */
}
.container .item img{
width:100%;
height:100%;
object-fit: cover;
/* 原有比例裁剪 */
}
.container .item:nth-child(1){
transform: translateZ(500px);
}
.container .item:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
.container .item:nth-child(3){
transform: rotateY(120deg) translateZ(500px);
}
.container .item:nth-child(4){
transform: rotateY(180deg) translateZ(500px);
}
.container .item:nth-child(5){
transform: rotateY(240deg) translateZ(500px);
}
.container .item:nth-child(6){
transform: rotateY(300deg) translateZ(500px);
}
@keyframes action{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="item"><img src="/jpg/6.png" alt=""></div>
<div class="item"><img src="/jpg/7.png" alt=""></div>
<div class="item"><img src="/jpg/8.png" alt=""></div>
<div class="item"><img src="/jpg/9.jpg" alt=""></div>
<div class="item"><img src="/jpg/10.png" alt=""></div>
<div class="item"><img src="/jpg/11.png" alt=""></div>
</div>
</body>
</html>
前端 旋转木马
最新推荐文章于 2024-07-19 14:40:55 发布