Как вращаться в CSS3 вокруг источника? - PullRequest
Новая
       0

Как вращаться в CSS3 вокруг источника?

6 голосов
/ 10 августа 2011

У меня есть следующие буквы 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

Ответы [ 2 ]

7 голосов
/ 11 августа 2011

Это должно выглядеть примерно так: вам нужно указать свои свойства 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>
2 голосов
/ 10 августа 2011

Преобразования имеют «источник-преобразование», связанный с ними. Если источник преобразования не указан, он автоматически устанавливается на (50%, 50%) элемента. Когда ваш точный код вводится как jsfiddle, он работает как задумано.

Я предполагаю, что в вашем полном коде вы неправильно указали источник преобразования или имеете другие странности в базовом CSS для вашего класса.

Обновление: да, у вас были странности в базовом CSS. Было бы полезно увидеть ваши полные CSS и HTML для отладки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...