Quizás muchos programan en HTML, CSS y les gusta hacer paginas bonitas con efectos y toda la cosa… pues si todavía no se han esterado , desde hace rato ya estamos estrenando CSS3 y muchos todavía no le están sacando el jugo, aquí empezaremos con algo simple y básico, una rotación en CSS3.
para ello vamos a emplear el siguiente código :
<html>
<head>
<style>
#texto {
-webkit-transform : rotate(-20deg);
}
</style>
</head>
<body>
<div id=»texto»>Hola Mundo esto es Pharalax.com</div>
</body>
</html>
Como podrán fijarse en el texto utilizo la propiedad -webkit-transform y verán que es para Google Chrome , y uso el selector #texto para referirme al texto dentro del div.
la función que utilizo rotate(-20deg) sirve para decir que lo que vamos a hacer es una rotación y el dato que está entre los paréntesis es el numero de grados que girare el objeto , en este caso -20 grados encontrar de las manecillas del reloj … el resultado :
La imagen es el resultado del código, solo correrá en Google Chrome. Ahora algo más elaborado:
Código:
<html>
<head>
<style>
body {
background : black ;
}
#texto {
margin-left : 200px ;
margin-top : 200px ;
width : 500px ;
background : yellow ;
font-size : 40px ;
-webkit-transform : rotate(-45deg);
-webkit-transition : background 0.5s linear, color 0.5s linear ;
}
#texto:hover {
background : lime ;
color : white ;
}
</style>
</head>
<body>
<div id=»texto»>Pharalax Software A la Medida</div>
</body>
</html>
Ejemplo :
Video AQUI :
http://pharalax.com/blog/wp-content/uploads/2012/02/unorotate.flv
listo ***
