ES

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 : 

  1. <style>
  2. .capa1{
  3.   width : 100px;
  4.   height : 100px;
  5.   background-color : #cccccc;
  6.   transform : translate( 100px , 0px );
  7. }
  8. </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 :

  1. <style>
  2. .capa1{
  3.   width : 100px;
  4.   height : 100px;
  5.   background-color : #cccccc;
  6.   transform : scale( 1.5 , 1.5 );
  7. }
  8. </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 :

  1. <style>
  2. .capa1{
  3.   width : 100px;
  4.   height : 200px;
  5.   background-color : #cccccc;
  6.   transform : skew( 30deg );
  7. }
  8. </style>

rotate(angulo)


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

Sin rotate :


rotate(45deg) :




Codigo CSS para su implementacion :

  1. <style>
  2. .capa1{
  3.   width : 100px;
  4.   height : 100px;
  5.   background : #cccccc;
  6.   transform : rotate( 45deg );
  7. }
  8. </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 :

  1. <style>
  2. .capa1 {
  3.   width : 100px;
  4.   height : 100px;
  5.   background-color : #cccccc;
  6.   transform : rotateX ( 60deg );
  7. }
  8. </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 :

  1. <style>
  2. .capa1{
  3.   width : 100px;
  4.   height : 100px;
  5.   background-color : #cccccc;
  6.   transform : rotateY ( 60deg );
  7. }
  8. </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
0
Proyectos Indie
©2021 www.codigo-facil.com