我有以下字母ABC,如下所示:

 <body>
 <div id="container">
   <div id="shape" class="spin">
     <div id="A" class="plane">A</div>
     <div id="B" class="plane">B</div>
     <div id="C" class="plane">C</div>
   </div>
 </div>

我想要每个字母绕其x轴旋转吗?

我尝试过(对于字母C):
#C {
 -webkit-animation: spinAboutItsCentre 8s linear;
}

@-webkit-keyframes spinAboutItsCentre {
  from {
        -webkit-transform: rotateX(0);
  }
  to   {

   -webkit-transform: rotateX(360deg);
  }
}

但是字母C移到了字母A旋转的位置。

有任何想法吗?

京东

最佳答案

它看起来应该像这样,您需要指定您的transform-origin属性;
x-%,y-%和z-px。

注意绕Y轴旋转会产生一些偏移,因为引擎对 Angular 色位置的解释起源于对象的“开始”(侧面),而不是对象的中心。

0%和100%表示您的“from”和“to”子句,这种格式允许您添加任意多的行,以增加在指定时间范围内的移动(即25%旋转90度,50%旋转180度,75%旋转270度,100%旋转360度)。

@-webkit-keyframes spinX
{
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}

@-webkit-keyframes spinY
{
0%   {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}

尝试这些样式,它们应该可以正常工作。
#Ca
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinX 8s infinite;
}

#Cb
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinY 8s infinite;
}

<div id="Ca">C</div>
<div id="Cb">C</div>

10-05 20:44
查看更多