<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 300px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
perspective: 2000px;
}
.box{
width: 300px;
height: 400px;
border: 1px solid blue;
position: relative;
transform-style: preserve-3d;
/* 保留3D位置 */
animation: photoMove 10s linear infinite;
/* 调用动画 */
}
.box>div{
position: absolute;
}
/* 设置不同图片的位置 */
.photo1{
transform: rotateY(60deg) translateZ(400px);
}
.photo2{
transform: rotateY(120deg) translateZ(400px);
}
.photo3{
transform: rotateY(180deg) translateZ(400px);
}
.photo4{
transform: rotateY(240deg) translateZ(400px);
}
.photo5{
transform: rotateY(300deg) translateZ(400px);
}
.photo6{
transform: rotateY(360deg) translateZ(400px);
}
/* 动画 */
@keyframes photoMove{
0%{
transform: rotateX(-25deg) rotateY(0);
}
100%{
transform: rotateX(-20deg) rotateY(360deg);
/*rotateX(-20deg)俯视的角度 */
}
}
/* 鼠标放置在图片上时box就暂停，并且放大 */
.box:hover{
animation: photoMove 10s linear infinite paused;
}
.box div:hover img{
transform: scale(1.1);
}
</style>
<body>
<div class="main">
<div class="box">
<div class="photo1"><img src="img/img-1.jpg" alt=""></div>
<div class="photo2"><img src="img/img-2.jpg" alt=""></div>
<div class="photo3"><img src="img/img-3.jpg" alt=""></div>
<div class="photo4"><img src="img/img-4.jpg" alt=""></div>
<div class="photo5"><img src="img/img-5.jpg" alt=""></div>
<div class="photo6"><img src="img/img-6.jpg" alt=""></div>
</div>
</div>
</body>
</html>
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
