<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转海报</title>
<style>
.four{
width: 200px;
height: 200px;
box-sizing: border-box;
margin: 200px auto;
transform-style: preserve-3d; /*使被转换的子元素保留其 3D 转换:*/
/*transform-style: flat|preserve-3d;
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。*/
position: relative;
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
animation:sport 5s linear 0s infinite normal;
}
@keyframes sport {
from{
transform:rotateX(0deg);
}
to{
transform:rotateX(360deg);
}
}
.four li{
list-style: none;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 40px;
position: absolute;
left: 0;
top: 0;
}
.four li:nth-child(1){
background-color: pink;
transform:rotateX(90deg) translateZ(100px) scale(2,1);
}
.four li:nth-child(2){
background-color: orange;
transform:rotateX(180deg) translateZ(100px) scale(2,1);
}
.four li:nth-child(3){
background-color: tomato;
transform:rotateX(270deg) translateZ(100px) scale(2,1);
}
.four li:nth-child(4){
background-color: yellowgreen;
transform:rotateX(360deg) translateZ(100px) scale(2,1);
}
.four li:nth-child(5){
background-color: skyblue;
transform:translateX(-200px) rotateY(90deg);
}
.four li:nth-child(6){
background-color: yellow;
transform:translateX(200px) rotateY(90deg);
}
.four li img{
/*只要父元素被拉伸了,子元素也会拉伸*/
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul class="four">
<li><img src="image/Jay1.jpg" alt=""></li>
<li><img src="image/Jay2.jpg" alt=""></li>
<li><img src="image/Jay3.jpg" alt=""></li>
<li><img src="image/Jay4.jpg" alt=""></li>
<li></li>
<li></li>
</ul>
</body>
</html>