图片旋转效果

Posted 2020-10-19 橙云生

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;
	}
	
}

　　图片旋转