1 <div class="rotatebox"> 2 3 <div class="flip"> 4 <img class="icon service" src="./lib/imgs/service.png" alt="二维码" /> 5 <img class="icon moreservice" src="./lib/imgs/moreservice.png" alt="更多服务" /> 6 </div> 7 </div>
.service{
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
z-index: 2;
}
.moreservice{
transform: rotateY(180deg);
position: absolute;
top: 0px;
left: 0;
/*z-index: -1;*/
backface-visibility: hidden;
}
.rotatebox{
perspective: 1000;
}
.flip{
position: relative;
-webkit-animation: rot 5s infinite linear;
animation: rot 5s infinite linear;
/* animation-delay: 2s;*/
}
.flip:hover{
animation: none;
}
@keyframes rot{
0%{
transform: rotateY(0);transform-style: preserve-3d;
}
20%{
transform: rotateY(90deg);transform-style: preserve-3d;
}
40%{
transform: rotateY(180deg);transform-style: preserve-3d;
}
60%{
transform: rotateY(270deg);transform-style: preserve-3d;
}
80%{
transform: rotateY(360deg);transform-style: preserve-3d;
}
100%{
transform: rotateY(360deg);transform-style: preserve-3d;
}
}
图片旋转
