17.- Rotamos texto o imágenes tantos grados como deseemos.
En este artículo veremos como podemos rotar texto e imágenes con CSS abandonando las tradicionales posiciones horizontal y vertical. Lo mejor de este código es que podemos ajustarlo a nuestras necesidades sencillamente ajustando los grados de inclinación, lo que nos confiere una maniobrabilidad total.
Si los grados de giro van precedidos del signo menos, el objeto, imagen o texto, se inclinará hacia arriba, si es positivo, se inclinara hacia abajo. Con 90, que serian los grados con signo menos o sin el tenemos un texto en vertical, ya sea escrito de arriba abajo o de abajo a arriba. Con valores intermedios como 45, tenemos un texto escrito en diagonal. En definitiva, podemos elegir la inclinación a capricho.
Aunque es sabido por todos, recordemos que el número de grados de una circunferencia es de 360, por tanto, tenemos 720 posible valores, que van desde -360 a 360. Veréis que efectos más curiosos se producen.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Rotamos texto con CSS.</title>
<style type="text/css">
<!--
/* Si -90 lo cambiamos por 90, cambia el sentido
de abajo a arriba, o de arriba a abajo.
Si ponemos -45 el texto se posiciona en diagonal */
#cap1{
position: absolute;
font-size: 40px;
}
#cap2{
position: relative;
top: 500px;
}
#cap3{
position: relative;
top: 700px;
}
.rotar1
{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
width: 250px;
position: relative;
top: 150px;
}
.rotar2
{
left: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
width: 250px;
position: relative;
top: 150px;
}
.rotar3
{
left: 400px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
width: 250px;
position: relative;
top: 150px;
}
.rotar4
{
left: 500px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
width: 250px;
position: relative;
top: 150px;
}
.rotar5
{
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
position: relative;
top: 150px;
}
.rotar6
{
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
position: relative;
left: 200px;
top: 200px;
}
.rotar7
{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
font-size: 40px;
position: relative;
text-align:center;
top: 100px;
}
-->
</style>
</head>
<body>
<div id="cap1">
<p>Asi tenemos un texto corriente y moliente.</p>
<div class="rotar1">Uterra.Com - 1</div>
<div class="rotar2">Uterra.Com - 2</div>
<div class="rotar3">Uterra.Com - 3</div>
<div class="rotar4">Uterra.Com - 4</div>
</div>
<div id="cap2">
<div class="rotar5">Aprendiendo CSS con Uterra.Com - 5</div>
<div class="rotar6"><img src="http://www.uterra.com/archcodfuente/demos_img/amp_imagen10.jpg" width="600" height="500"> - 6</div>
</div>
<div id="cap3">
<div class="rotar7">A que no esperabas un efecto como este?? - 7</div>
</div>
</body>
</html>
