代码如下:
<style>
body{
background: linear-gradient(rgb(228, 226, 226) 50%,rgb(109, 109, 106) 100%);
}
.fa{
width: 300px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d;
/* perspective: 1000px; */
position: relative;
/* transform: rotateX(-10deg) rotateY(-40deg); */
animation: identifier 6s infinite linear ;
}
@keyframes identifier {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(10deg) rotateY(360deg);
}
}
.fa>div {
width: 300px;
height: 200px;
background-color: pink;
border: 1px solid #ccc;
font-size: 30px;
text-align: center;
line-height: 200px;
position: absolute;
opacity: .3;
}
.fa img{
width: 300px;
height: 200px;
-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,0.5));
}
.son01 {
transform: translateZ(300px);
}
.son02 {
transform: rotateY(60deg) translateZ(300px);
}
.son03 {
transform: rotateY(120deg) translateZ(300px);
}
.son04 {
transform: rotateY(180deg) translateZ(300px);
}
.son05 {
transform: rotateY(240deg) translateZ(300px);
}
.son06 {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<div class="fa">
<div class="son01">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
<div class="son02">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
<div class="son03">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
<div class="son04">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
<div class="son05">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
<div class="son06">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
</div>
</div>
</body>
</html>