如何在 Y 轴 3D 中旋转 div 360？

Question

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

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

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

我做错了什么？出于学习目的，将不胜感激。

提前谢谢你，会accept/upvote回答。

Answer 1

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

如何在 Y 轴 3D 中旋转 div 360？

How to rotate div 360 in 3D in Y axis?

html

css

transformation

css-animations