利用css3動畫，做一個鼠標經過圖標，旋轉360°的小特效

利用css3動畫效果，做的一個平滑過渡的小特效，3d旋轉的特效

 ------------------------------------------------

  動畫設置：

@keyframes xuanzhuan {
  from {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: linear;
  }
  20% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -300deg);
    animation-timing-function: linear;
  }
  40% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -240deg);
    animation-timing-function: linear;
  }
  60% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
    animation-timing-function: linear;
  }
  80% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -60deg);
    animation-timing-function: linear;
  }
  to {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);;
    animation-timing-function: linear;
  }
}

 

調用：

<style>
.demo {
	width: 100px;
	text-align: center;
}
.demo:hover {
	animation: xuanzhuan 0.5s 1;
	-webkit-animation: xuanzhuan 0.5s 1;
	-moz-animation: xuanzhuan 0.5s 1;
}
</style>

<h1 class="demo">s</h1>