7

Aprendiendo CSS3 – Transformaciones

18Feb
en CSS, CSS 3, Desarrollo web, Tutoriales

En este tutorial vamos a ver cómo hacer transformaciones a nuestros objetos visuales usando CSS3. Primero vamos a preparar nuestra página inicial con la imagen que transformaremos.


<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="utf-8" />

		<title>Transformaciones</title>

		<style>

			#logo {

			}

		</style>

	</head>

	<body>

		<img id="logo" src="logo_uci.png">

	</body>

</html>

Las transformaciones las haremos usando la propiedad transform y los tipos de transformaciones que podemos hacer son los siguientes:

Rotación: Las unidades para este tipo de transformaciones son los grados, se utiliza deg. Los valores negativos son para que gire en contra de las manecillas del reloj.


#logo {

	transform: rotate(-33deg);

}

Para rotar un objeto existe un punto origen que por defecto es en el centro. Este punto se puede cambiar usando la propiedad transform-origin. Las coordenadas del nuevo origen se pueden dar en pixeles o en porcientos. Si quisiéramos que el origen cambie a la esquina inferior derecha, quedaría así:


#logo {

	transform-origin: 100% 100%;

	transform: rotate(33deg);

}

Escala: La unidad significa que crecerá tantas veces su tamaño. Las unidades pueden ser con punto, por ejemplo, si queremos que disminuya la mitad de su tamaño usamos .5 y si queremos que aumente el doble usamos 2.


#logo {

	transform: scale(.5);

}

Trasladar: Se moverá hacia la derecha tantos pixeles especifiquemos, si queremos moverlo a hacia la izquierda usamos valores negativos.


#logo {

	transform: translate(50px);

}

Podemos combinar varias transformaciones sobre un objeto separándolas por espacios, las tres transformaciones sobre el objeto quedarían así:


#logo {

	transform: translate(50px) rotate(-33deg) scale(.5);

}

Ahora veremos un tipo de transformación más complicada, para poder ver toda su utilidad usaremos más imágenes, las ubicaremos en forma de lista. Copiemos estas tres nuevas imágenes y usemos el siguiente html:


<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="utf-8" />

		<title>Transformaciones</title>

		<style>

			#imagenes {

				}

			#imagenes ul {

				}

			#imagenes li {

				list-style: none;

				float: left;

				margin: 20px;

				}

		</style>

	</head>

	<body>

		<div id="imagenes" >

			<ul>

			<li><img id="img1" src="cake_tn.jpg" /></li>

			<li><img id="img2" src="gummies_tn.jpg" /></li>

			<li><img id="img3" src="tampalights_tn.jpg" /></li>

			</ul>

		</div>

	</body>

</html>

La transformación que vamos a realizar es la de rotación con perspectiva. Lo primero es especificar en el div que contiene todas las imágenes cuantos pixeles usaremos para la perspectiva. Y en la lista especificamos una transformación con los parámetros rotateX y rotateY que permiten rotar las imágenes en los ejes X y Y. Lo moví 300px hacia la derecha para que las imágenes no se perdieran.


#imagenes {

	perspective: 600px;

}

#imagenes ul {

	transform: translate(300px) rotateY(38deg) rotateX(-6deg);

}

Podemos ir cambiando los valores para obtener distintos puntos de vistas. Vale aclarar que estas transformaciones solo me funcionaron en Firefox, si se quisiera utilizar en Chrome habría que usar la propiedad -webkit-transform. Para que exista la compatibilidad usaría las dos formas en el css.

7 Comentarios

  1. zico dice:

    Ecelente este artículo. Me parece genial esta propiedad de CSS3. Lo queu quisiera saber los otros navegadores si tienen soporte para ella.

  2. Erick dice:

    En este mismo sitio, en la pagina principal se usan las transformaciones en la parte donde se muestran los demos.

  3. Rob3r dice:

    cada dia css va tomando mas fuerza solo falta que se creen los estandares para los navegadores

  4. ronier dice:

    eric, me gustaria saber como puede un estudiante externo a la UCI pertenecer a la comunidad de desarrollo!!!
    agradeceria que me respondieras a mi correo: ronier@mecamail.upr.edu.cu

  5. yoel2d dice:

    Estos codigos me parecen muy buenos, pero Quisiera hacerles una pregunta. Como puedo ponerlos que se ejecuten con una accion? Ej.OnMouseMove, etc…

    *Espero respuestas OK!!!

    • abraham dice:

      En CSS existen las seudo-clases como por ejemplo :hover (para cuando el mouse este encima). No obstante puedes utilizar Javascript y modificar los estilos y crear animaciones como la que deseas.

Dejar un comentario a ronier

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.