Rotaciones – Usando CSS3

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 ***

Related Posts Plugin for WordPress, Blogger...

publicidad

Deja un comentario

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