<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复仇者联盟</title>
<style>
html{
perspective: 800px; //重点
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: shichaobo linear 10s infinite;
}
.box div{
width: 200px;
height: 200px;
position: absolute;
opacity: 1;
}
.box .box1{
background: url(./img/1.jpg);
transform: rotateY(90deg) translateZ(100px);
}
.box .box2{
background: url(./img/2.jpg);
transform: rotateY(180deg) translateZ(100px);
}
.box .box3{
background: url(./img/3.jpg);
transform: rotateY(270deg) translateZ(100px);
}
.box .box4{
background: url(./img/4.jpg);
transform: rotateX(90deg) translateZ(100px);
}
.box .box5{
background: url(./img/5.jpg);
transform: rotateX(270deg) translateZ(100px);
}
.box .box6{
background: url(./img/6.jpg);
transform: translateZ(100px);
}
@keyframes shichaobo{
from{
transform: rotateX(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateZ(1turn);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
