如何在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？

回答

相关问题