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

Question

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

我有以下字母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>

Run Code Online (Sandbox Code Playgroud)

我想要的是每个字母围绕其x轴旋转？

我试过(字母C):

#C {
 -webkit-animation: spinAboutItsCentre 8s linear; 
}

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

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

Run Code Online (Sandbox Code Playgroud)

但字母C移动到字母A旋转到其轴的位置.

有任何想法吗？

JD

Answer 1

Chr*_*ris 7

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

关于Y轴旋转的注意事项会产生一些偏移,因为引擎对角色位置的解释起源于对象的"开始"(侧面),而不是对象的中心.

0%和100%的名称代表您的"从"和"到"子句,此格式允许您添加尽可能多的这些行,以便在指定的时间范围内增加移动(即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;}  
}

Run Code Online (Sandbox Code Playgroud)

尝试这些风格,他们应该工作正常.

#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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	13936 次
最近记录：	14 年，3 月前