html - 如何在Y轴上以3D旋转div 360？

我正在尝试重新创建在Y轴上旋转3D的文本。

所以我想出了以下内容，它居中，但它什么也没做（顺便说一句，我正在使用SCSS）：

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

我可能做错了什么？为了学习的目的，将理解解释。

预先谢谢您，我们会接受/支持答案。

最佳答案

您实际上需要制作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。

关于html - 如何在Y轴上以3D旋转div 360？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42144949/