Question

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

所以我想出了以下内容并且它是居中的，但它没有做任何事情（顺便说一下我使用的是SCSS）：

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

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

提前感谢您，并接受/ 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？

1 个答案: