Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo rotar elementos HTML usando CSS

 En este tutorial veremos cómo rotar un elemento como imagen o texto usando CSS . generalmente es requerido por un diseñador web para dar algún efecto de animación.

La animación agrega un efecto adicional en su página web. En este ejemplo, usaremos la  propiedad de rotación CSS  para rotar un elemento. La regla @keyframes se usa para animar el elemento del estilo actual al nuevo estilo. Solo necesitamos vincular la animación a un elemento.

En esta animación, definimos el nombre de la animación (por ejemplo, myobject), la duración de la animación (5 s), el recuento de iteraciones (por ejemplo: infinito) y la dirección (lineal)

La propiedad -webkit-transform se utiliza para transformar un elemento en un espacio 2D o 3D.

HTML

<img src = "fútbol.jpg" id = "my_img">  

CSS

    #my_img { 
animación: myobject 5s infinita facilidad;
-webkit-animation: myobject 5s infinita facilidad; } @ -webkit-keyframes myobject {
de {-webkit-transform: rotate (0deg)} a {-webkit-transform: rotate (360deg)}}

Demo en vivo

Publicar un comentario

0 Comentarios