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.

Compartir esto:

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 *