如何在Y軸上3D旋轉div 360？

我正在嘗試重新創建在Y軸上旋轉3D的文本。如何在Y軸上3D旋轉div 360？

於是我想出了以下內容，它爲中心，但它不會做任何事情（我使用SCSS的方式）：

<div class="wrapper"> 
    <div id="rotate-wrapper"> 
     <div> 
     Rotate me 
     </div> 
    </div> 
    </div>

什麼可能我是做錯了什麼？爲了學習的目的，解釋將被讚賞。

預先感謝您，並會接受/ upvote答案。

來源

2017-02-09 Jo Ko

您需要實際製作rotation動畫。在您指定的網站，它的定義是：

@-webkit-keyframes rotation { 
    0% { 
    -webkit-transform: rotateY(0deg); 
      transform: rotateY(0deg); } 
    50% { 
    -webkit-transform: rotateY(180deg); 
      transform: rotateY(180deg); } 
    100% { 
    -webkit-transform: rotateY(360deg); 
      transform: rotateY(360deg); } } 

@keyframes rotation { 
    0% { 
    -webkit-transform: rotateY(0deg); 
      transform: rotateY(0deg); } 
    50% { 
    -webkit-transform: rotateY(180deg); 
      transform: rotateY(180deg); } 
    100% { 
    -webkit-transform: rotateY(360deg); 
      transform: rotateY(360deg); } }

有關如何CSS動畫的工作，看到this MDN article解釋。

來源

2017-02-09 19:11:12 Lemmmy

在我接受答案並且贊成之前，我怎麼能在轉回到後面時切換到另一個文本？另外，如何優化代碼以使其更有意義？我在創建CSS時做了猜測，所以相信它並不乾淨。 –

你會有兩個文本，第二個文本是'transform：rotateY（180deg）;'。你也可以確保它們重疊。沒有「優化」代碼 - 它很有意義。 – Lemmmy

「全部」對於過渡和「透視」意味着什麼？還有什麼是百分比，例如0％，50％等代表？ –

如何在Y軸上3D旋轉div 360？

回答

相關問題