Blog
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:
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.