tag img etiqueta atributos image css3 animation rotation

image - img - Animación de giro CSS3



etiqueta img (5)

Aquí esto debería ayudarte

El siguiente enlace jsfiddle te ayudará a entender cómo rotar una imagen. Utilicé la misma para girar el dial de un reloj.

http://jsfiddle.net/xw89p/

var rotation = function (){ $("#image").rotate({ angle:0, animateTo:360, callback: rotation, easing: function (x,t,b,c,d){ return c*(t/d)+b; } }); } rotation();

Donde: • t: hora actual,

• b: inicio de valor,

• c: cambio en valor,

• d: duración,

• x: sin usar

Sin suavizado (relajación lineal): función (x, t, b, c, d) {retorno b + (t / d) * c; }

<img class="image" src="" alt="" width="120" height="120">

No se puede hacer que esta imagen animada funcione, se supone que debe hacer una rotación de 360 ​​grados.

Supongo que algo está mal con el CSS a continuación, ya que simplemente se queda quieto.

.image { float: left; margin: 0 auto; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } }


Aquí hay una demo . La animación correcta CSS:

.image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Algunas notas sobre tu código:

  1. Has anidado los fotogramas clave dentro de la regla .image , y eso es incorrecto
  2. float:left no funcionará en elementos absolutamente posicionados
  3. Eche un vistazo a caniuse : IE10 no necesita el prefijo -ms-

Para lograr la rotación de 360 ​​grados, aquí está la Solución de trabajo .

El HTML:

<img class="image" src="your-image.png">

El CSS:

.image { overflow: hidden; transition-duration: 0.8s; transition-property: transform; } .image:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); }

Tienes que pasar el cursor sobre la imagen y obtendrás el efecto de rotación de 360 ​​grados.

PD: agregue una extensión -webkit- para que funcione en Chrome y otros navegadores webkit. Puede consultar el violín actualizado para el kit web AQUÍ


Tengo una imagen giratoria usando lo mismo que tú:

.knoop1 img{ position:absolute; width:114px; height:114px; top:400px; margin:0 auto; margin-left:-195px; z-index:0; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .knoop1:hover img{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }


si quieres voltear la imagen, puedes usarla.

.image{ width: 100%; -webkit-animation:spin 3s linear infinite; -moz-animation:spin 3s linear infinite; animation:spin 3s linear infinite; } @-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } } @-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } } @keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }