<style>
.box{
width: 300px;
height: 300px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(20deg);
font-size: 100px;
text-align: center;
line-height: 300px;
animation: movee 10s linear infinite;
}
@keyframes movee{
0%{
transform:rotateX(-20deg) rotateY(20deg);
}
50%{
transform:rotateX(-20deg) rotateY(380deg);
}
100%{
transform:rotateX(-380deg) rotateY(380deg);
}
}
.box>div{
position: absolute;
left: 0;
top: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: pink;
transform: rotateX(90deg) translateZ(150px);
}
.box2{
width: 300px;
height: 300px;
background-color: green;
transform: rotateX(-90deg) translateZ(150px);
}
.box3{
width: 300px;
height: 300px;
background-color: yellow;
transform: rotateY(-90deg) translateZ(150px);
}
.box4{
width: 300px;
height: 300px;
background-color: red;
transform: rotateY(90deg) translateZ(150px);
}
.box5{
width: 300px;
height: 300px;
background-color: palegreen;
transform: rotateY(180deg) translateZ(150px);
}
.box6{
width: 300px;
height: 300px;
background-color: blue;
transform: translateZ(150px);
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
