Как я могу сохранить элементы внутри div независимыми от анимации CSS3?

У меня есть небольшой анимированный винтик, использующий CSS3, но я хочу, чтобы текст внутри него оставался неподвижным. Изменение положения на абсолютное или фиксированное не работает,и я не знаю, как это сделать.

Http://jsfiddle.net/kJf3Y/

Мой HTML: 

<div class="port">
<h1 class="portTitle">Test</h1>
<p id="portText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec   lectus  ipsum, pulvinar vel molestie facilisis, posuere ut lectus. Aliquam posuere turpis ac dolor dapibus sed rhoncus neque blandit. Mauris nec pellentesque mi. Aenean congue scelerisque pulvinar. Sed a velit vitae quam pulvinar pellentesque. Aliquam erat volutpat. Nullam a sapien felis, eu auctor ante. Pellentesque elementum egestas lectus, sit amet scelerisque nisl rutrum ut. Duis fermentum tortor nec neque placerat in blandit dui consequat. Suspendisse potenti. Nulla sit amet mauris vel lorem molestie fermentum.</p>
</div>

И мой CSS: 

.port {
width: 330px;
height: 330px;
margin: 100px;
float: left;
background-color: #EFEFEF;
color: #000;
border-radius: 100%;
border: 15px dashed #FFFFFF;
/* box-shadow: 0 0 50px #000; */
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 30s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 30s;
-webkit-animation-name: rotate; 
-webkit-animation-duration: 30s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate; 
-moz-animation-duration: 30s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

.portTitle {
font-size: 30px;
text-align: center;
}

.portText {
   margin: 0 auto;
}
1 3
css css3 children

1 ответ:

Я думаю, что лучшим решением будет создать новый элемент внутри вашего класса .port с абсолютным позиционированием и отрицательным z-индексом и анимировать только этот элемент вместо всего контейнера.

Так что это шаг, чтобы следовать.

Создайте новый элемент для анимации 

<div class="port">
  <div class="port_animation"></div>
  <h1 class="portTitle">Test</h1>
  <p id="portText"></p>
</div>

Удалить анимацию

Также убедитесь, что .port имеет относительное расположение, только для области абсолютного позиционированного элемента внутри.

.port {
  position: relative;
  width: 330px;
  height: 330px;
  margin: 100px;
  color: #000;
}

Анимация и стиль новый элемент

Элемент не имеет высоты и ширины, потому что он будет покрывать ширину отцовских элементов, из-за того, что верхний, правый, нижний и левый установлены в ноль. z-index значение для элемента, чтобы остаться позади.

.port_animation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #EFEFEF;
  color: #000;
  border-radius: 100%;
  border: 15px dashed #FFFFFF;
  /* And all the animation stuff also here */
}

Я обновил вашу демо-версию с этими изменениями.

jsFiddle

1