-
实现效果
-
代码
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
<div class="son son4">4</div>
<div class="son son5">5</div>
<div class="son son6">6</div>
</div>
.father {
position: relative;
width: 100px;
height: 100px;
margin: 100px 200px;
transform-style: preserve-3d;
perspective: 10000px;
transition: all 4s;
animation: rotate3d 1s infinite 0.5s linear;
}
.father:hover{
transform: rotate3d(1,1,0,360deg);
}
.son {
position: absolute;
width: 100px;
height: 100px;
left: 0;
top: 0;
border: 1px solid #000;
background-color: red;
/* box-shadow: 0 4px 4px rgba(0,0,0,0.3); */
/* border-radius: 4px; */
transition: all 3s;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
font-weight: 700;
}
.son1 {
transform: translate3d(-50px,0,0) rotate3d(0,1,0,-90deg);
}
.son2 {
transform: translate3d(50px,0,0) rotate3d(0,1,0,90deg);
}
.son3 {
transform: translate3d(0,0,-50px);
}
.son4 {
transform: translate3d(0,0,50px);
}
.son5 {
transform:translate3d(0,-50px,0) rotate3d(1,0,0,90deg);
}
.son6 {
transform:translate3d(0,50px,0) rotate3d(1,0,0,90deg);
}
@keyframes rotate3d {
0% {
transform: translate3d(10px,10px,10px) rotate3d(1,1,0,0deg);
}
20% {
transform: translate3d(10px,100px,0) rotate3d(1,1,0,60deg);
}
40% {
transform: translate3d(100px,10px,100px) rotate3d(1,1,0,-180deg);
}
60% {
transform: translate3d(-10px,10px,300px) rotate3d(1,1,0,240deg);
}
100% {
transform: translate3d(10px,0,-100px) rotate3d(1,1,0,360deg);
}
}