CSS

Rotar una etiqueta en CSS

Anteriormente hemos visto cómo utilizar la propiedad float en CSS, hoy aprenderemos a rotar una etiqueta en CSS, para esto vamos a utilizar la propiedad transform compatible con distintos navegadores.

¿Cómo rotar una etiqueta en CSS?

Para entender como realizar esta tarea vamos a crear un cuadrado de color rojo al cual le aplicaremos una rotación de 120 grados:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotar una etiqueta en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      #cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
      .rotacion{
        -ms-transform: rotate(120deg); /* IE 9 */
        -webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
        transform: rotate(120deg);
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="rotacion"></div>
  </body>
</html>

En la clase rotación agregamos distintas variantes de la propiedad transform para que funcione en varios navegadores. Si visualizamos la página anterior en nuestro navegador vamos a ver el cuadrado rojo con una rotación de 120 grados:

Rotacion en CSS

Rotacion en CSS

Ahora si queremos que la rotación sea constante tenemos que utilizar Java Script con la función setInterval de la siguiente forma:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotar una etiqueta en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      #cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
      .rotacion{
        -ms-transform: rotate(120deg); /* IE 9 */
        -webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
        transform: rotate(120deg);
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="rotacion"></div>
    <script>
      var grados =120;
      $(document).ready(function() {
        
        setInterval(function(){
          grados = (grados % 360) + 1;
          $("#cuadrado").css("transform", 'rotate(' + grados + 'deg)');
        },50);
        
      });
    </script>
  </body>
</html>

De esta forma cada 50 milisegundos rotará un grado nuestro cuadrado. Si no entendemos como funciona la función setInterval los invito a pasar por el tutorial http://programacionextrema.com/2015/11/13/funciones-setinterval-y-settimeout-en-java-script.

Bueno gente, hemos llegado al final de este tutorial para rotar una etiqueta en CSS. Ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *