css rotate3d问题

Question

https://codepen.io/justjump/p...

怎么让这个圆在平面上旋转?

Answer 1

谢邀。

这里需要同时操作两个轴，注意先后顺序，先旋转X，再选择Z

.transformed {
    width:250px;height:250px;
    animation: spin 5s linear infinite;
}

@keyframes spin {
  from {
   transform:rotateX(75deg) rotateZ(0) ;
  }
  to {
   transform:rotateX(75deg) rotateZ(360deg) ;
  }
}

https://codepen.io/xboxyan/pe...

Answer 2

.transformed {
  -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
}
 @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

Answer 3

你把原文的 CSS 改成这样就可以了

.transformed {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  50% {
   transform: rotateY(360deg);
  }
}