<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box{
width: 400px;
height: 400px;
margin: 150px auto;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
.box > div{
opacity: .8;
position: absolute;
}
img{
width: 400px;
height: 400px;
}
.box1{
transform: rotateY(90deg) translateZ(200px);
}
.box2{
transform: rotateY(-90deg) translateZ(200px);
}
.box3{
transform: rotateX(90deg) translateZ(200px);
}
.box4{
transform: rotateX(-90deg) translateZ(200px);
}
.box5{
transform: rotateX(0deg) translateZ(-200px);
}
.box6{
transform:translateZ(200px) rotateY(180deg) ;
}
@keyframes rotate{
from{
transform: rotateX(0) rotateZ(0);
}
to{
/* turn表示转一圈 */
transform: rotateX(1turn) rotateZ(1turn);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<img src="https://img2.baidu.com/it/u=5127007,3812041565&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
</div>
<div class="box2">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1a26c771-efae-4ad6-b0b6-b65ae4ba9a4d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381031&t=9e7f312124dec799268934fcf251b54b" alt="">
</div>
<div class="box3">
<img src="https://img2.baidu.com/it/u=154011915,3804345797&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
</div>
<div class="box4">
<img src="https://img2.baidu.com/it/u=2564921989,1524882583&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
</div>
<div class="box5">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F4b040e1f-41f5-496a-8639-1cddc8c9d773%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381123&t=c492c5a1d1b7fcb79b2d586b4fd0500a" alt="">
</div>
<div class="box6">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11a139e1-513d-4dde-b3bc-5b1e96fcc54d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381124&t=c9b41e74380026f56d551094298ebcad" alt="">
</div>
</div>
</body>
</html>
