www.codigo-facil.com > CSS3 La propiedad transform

CSS3 - Transform

Introduccion

La propiedad transform es introducida en la especificacion CSS3 y nos sirve para modificar el espacio de coordenadas visual de los elementos HTML, de esta forma ahora podremos trasladar, rotar o escalar.

Destacar que la especificacion CSS3 va ligada a HTML5 por lo que sera necesaria la utilizacion de navegadores compatibles para su correcta visualizacion. En algunos casos es necesaria la incluision de prefijos dependiendo de la version del navegador :

tranform : Version estandard de la propiedad.
-ms-transform : Version alternativa para Internet Explorer 9.
-webkit-transform : Version alternativa para Chrome, Safari y Opera

A continuacion vamos a ver con detalle los principales valores que puede tomar la propiedad transform.

translate(x,y)

Nos permite definir desplazamientos en los ejes de coordenadas X e Y.

Sin desplazamiento :

translate(100px,0px) :

Codigo CSS para su aplicacion :

<style>
.capa1{
width : 100px;
height : 100px;
background-color : #cccccc;
transform : translate( 100px , 0px );
}
</style>

scale(x,y)

Nos permite modificar la escala de un elemento. Destacar que el valor por defecto para establecer la escala orginal es 1.

Sin escala :

scale(1.5,1.5) :

Codigo CSS para su implementacion :

<style>
.capa1{
width : 100px;
height : 100px;
background-color : #cccccc;
transform : scale( 1.5 , 1.5 );
}
</style>

skew(x-angulo , y-angulo)

Nos permite desplazar los ejes de un elemento. El desplazamiento que queremos aplicar se define en grados.

Sin skew :

skew(30deg) :

Codigo CSS para su implementacion :

<style>
.capa1{
width : 100px;
height : 200px;
background-color : #cccccc;
transform : skew( 30deg );
}
</style>

rotate(angulo)

Aplica una rotacion segun el angulo especificado al elemento que se aplica.

Sin rotate :

rotate(45deg) :

Codigo CSS para su implementacion :

<style>
.capa1{
width : 100px;
height : 100px;
background : #cccccc;
transform : rotate( 45deg );
}
</style>

rotateX(angulo)

Nos permite aplicar una rotacion sobre el eje x.

Sin rotateX :

sin rotate

rotateX(45deg) :

rotateX(60deg)

Codigo CSS para su implementacion :

<style>
.capa1 {
width : 100px;
height : 100px;
background-color : #cccccc;
transform : rotateX ( 60deg );
}
</style>

rotateY(grados)

Permite aplicar una rotacion de los elementos afectados sobre el eje Y.

Sin rotateY :

Sin rotateY

rotateY(60deg) :

rotateY(60deg)

Codigo CSS para su implementacion :

<style>
.capa1{
width : 100px;
height : 100px;
background-color : #cccccc;
transform : rotateY ( 60deg );
}
</style>

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información

13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL

Más información

19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.

Más información

20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos

Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información

04/09/2013 15:44:29

Publica tu opinión

Inicio

Proyectos Indie

WebCreator

Mini Juego Indie

Los articulos