Вопросы Теги

Как повернуть в 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>

Я хочу, чтобы каждая буква вращалась вокруг оси x?

Я пробовал (для буквы C): 

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

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

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

но буква C перемещается туда, где буква A вращается вокруг своей оси.

Есть идеи?

JD

6
задан BoltClock 10 August 2011 в 16:06
поделиться