CSS3前後左後翻轉效果

admin發表於2017-12-06
CSSS3

分享一段程式碼例項，它利用css3實現了div元素前後左後翻轉。

翻轉具有3D立體效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.spinner {
  width:60px;
  height:60px;
  background:#67CF22;
  margin:100px auto;
  animation:rotateplane 1.2s infinite ease-in-out;
}
  
@keyframes rotateplane {
  0% {
    transform:perspective(220px);
  }
  50% {
    transform:perspective(220px) rotateY(180deg);
  }
  100% {
    transform:perspective(220px) rotateY(180deg) rotateX(180deg);
  }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.spinner {
  width:60px;
  height:60px;
  background:#67CF22;
  margin:100px auto;
  animation:rotateplane 1.2s infinite ease-in-out;
}

設定元素的寬度和長度分別為60px。

然後利用margin將其設定為水平居中效果。

最後為元素應用動畫效果，具體參閱相關閱讀中對應文章。

[CSS] 純文字檢視 複製程式碼
@keyframes rotateplane {
  0% {
    transform:perspective(220px);
  }
  50% {
    transform:perspective(220px) rotateY(180deg);
  }
  100% {
    transform:perspective(220px) rotateY(180deg) rotateX(180deg);
  }
}

通過@keyframes對動畫實現精確的控制，也就是規定在不同階段所執行的不同效果。

一個完整的動畫過程耗時1.2秒，分為兩個階段0%-50%和50%-100%。

第一階段是元素圍繞Y軸旋轉180度，以動畫方式進行。

第二階段是在第一階段的接觸上，再圍繞X軸旋轉180度。

perspective也是很重要的，否則沒有透視效果。

二.相關閱讀:

（1）.animation參閱CSS3 animation一章節。

（2）.@keyframes參閱CSS3 @keyframes一章節。

（3）.transform參閱CSS3 transform一章節。

（4）.perspective參閱CSS3 perspective詳解一章節。

相關文章