Question

我有以下字母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旋转到其轴的位置。

有什么想法吗？

JD

Answer 1

看起来应该是这样的，你需要指定你的transform-origin属性; x-％，y-％和z-px。

关于Y轴旋转的注意事项会产生一些偏移，因为引擎对角色位置的解释起源于对象的“开始”（侧面），而不是对象的中心。

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>

Answer 2

变换具有与它们相关联的“变换原点”。如果未指定变换原点，则会自动将其设置为元素的（50％，50％）。当你的确切代码作为jsfiddle输入时，它按预期工作。

我的猜测是，在您的完整代码中，您已经错误地指定了转换原点，或者在您的类的基本CSS中有其他奇怪。

更新：所以，是的，你在基础CSS中有点奇怪。查看完整的 CSS和HTML以进行调试会很有帮助。

如何围绕原点在CSS3中旋转？

2 个答案: