Transformaciones en CSS3

Hoy nos toca aprender a realizar transformaciones con CSS3, ahora tenemos el poder de realizar traslaciones, rotaciones, escalamiento, etc. de elementos, entonces nuestra tarea ahora será conocer las propiedades que nos permitan realizar dichas transformaciones, además veremos varios ejemplos prácticos para que puedas practicar y volverte en un experto de transformaciones en CSS3.

Qué son las transformaciones en CSS

Las transformaciones de CSS3 son cambios de una determinada característica de un elemento que se encuentra dentro de la estructura del documento HTML, dichos cambios se realizan de forma controlada mediante las propiedades de transformación CSS3. Entre las transformaciones más conocidas podemos mencionar: rotación, translación, escala.

La rotación básicamente gira a los elementos sobre su propio eje, la traslación cambia de posición y la escala puede hacer que un elemento cambie sus dimensiones basándose en escalas determinadas; además de estas existen otras transformaciones CSS3 e incluso en 3 dimensiones (3D), las mismas que desarrollaremos detenidamente en esta lección.

Cómo crear transformaciones en CSS3

Las transformaciones funcionan de forma sencilla, simplemente declaramos la propiedad transform y en su valor establecemos la transformación a ser aplicada con su respectiva medida; dependiendo del tipo de transformación, las unidades de medida pueden ser de longitud, ángulo de rotación, etc. Por ejemplo si queremos establecer una transformación tipo rotación de 40 grados a un elemento, la declaración seria de la siguiente manera: transform: rotate (40deg); mejor conozcamos cada transformación separadamente a continuación.

Transform: rotate

La transformación rotate nos permite rotar un elemento mediante código CSS, dicha rotación se puede realizar en sentido horario cuando el valor que toma el parámetro es positivo y antihorario cuando el valor del paramento es negativo.

Cómo rotar un elemento con CSS

Rotar cualquier elemento es muy sencillo, solo debemos establecer la propiedad transform con la respectiva rotación, por ejemplo de la siguiente manera: transform: rotate (30deg);

<div class="rotar"></div>

<style>
  .rotar {
    width: 250px;
    height: 100px;
    margin:100px;
    background:orange;
    transform: rotate(30deg);
  }
</style>

Ejemplos de rotación

Ejemplo 1.- En el siguiente ejemplo haremos que el contenedor con class="container" contenga a al contendor con class="rotar"; ambos tienen dimensiones iguales y se encuentran básicamente en la misma posición; a partir de ella haremos que el contendor con class="rotar", rote 45 grados en sentido horario, es decir, la rotación tendrá un valor positivo. Para ver el resultado, simplemente ejecuta el siguiente código y si gustas puedes modificar valores para que veas como cambia.

<div class="container">
<div class="rotar"></div>
</div>
<style>
  .rotar {
    width: 250px;
    height: 100px;
    background:orange;
    transform: rotate(45deg);
  }
  .container {
    width: 250px;
    height: 100px;
    margin:100px;
    background: red;    
    transform: rotate(0deg);

    
  }
</style>

Observa cómo por defecto, la rotación se realiza a partir del centro del elemento y de un extremo. Ahora prueba tú a cambiar valores y jugar incluso con valores negativos de rotación para ver la diferencia.

Transform-origin

Mediante la propiedad transform-origin podemos modificar la posición original de los elementos trasformados, por lo tanto, la propiedad transform-origin se usa junto con una transformación, ya sea de rotación u otra.

Valores de transform-origin

La propiedad transform-origin tiene como valores por defecto 50% en eje x y 50% en eje Y, básicamente coincide con el centro del elemento transformado cuando es una rotación.

También se pueden emplear palabras clave para trasladar el origen de las transformaciones; por ejemplo:

• center.- equivale a 50%
• left.- equivale a izquierda 0%
• top.- equivale a superior 0%
• right.- equivale a derecha 100%
• bottom.- equivale a inferior 100%

Ejemplo de transform-origin

En el siguiente ejemplo, el bloque naranja es rotado 90deg mediante transform: rotate(90deg);, por defecto la rotación se debería realizar al centro, pero mediante la propiedad transform-origin cambiaremos y el nuevo punto de rotación será top (arriba) left (izquierda), es decir en la esquina superior izquierda; la declaración quedaría: transform-origin: top left; que sería lo mismo que: transform-origin: 0% 0%;

<div class="azul">
<div class="naranja"></div>
</div>
<style>
  .naranja {
    width: 250px;
    height: 100px;
    background:orange;
    transform: rotate(90deg);    
    transform-origin:top left;
  }
  .azul {
    width: 250px;
    height: 100px;
    margin:100px;
    background: blue; 
    z-index:99;
    transform: rotate(0deg);      
  }
</style>

Transform: translate

Mediante el método translate ahora es posible trasladar elementos de una posición a otra mediante código CSS. Podemos mover un elemento en dirección horizontal y verticalmente, para ello haremos uso de valores.

Valores para transform: traslate

Los valores para expresar las longitudes de traslación son numéricos con sus respectivas unidades de longitud, pueden ser px, em, etc.

Los valores positivos harán que la traslación se realice hacia la derecha en dirección horizontal (eje X) y hacia abajo en dirección vertical (eje Y), mientras que los valores negativos harán que la traslación sea hacía la izquierda en dirección horizontal y hacia arriba en dirección vertical. A continuación veamos algunos ejemplos.

Ejemplo de transform: translate

En el siguiente ejemplo de transform: translate hemos creado dos bloques uno dentro del otro, con las mismas dimensiones, el bloque amarillo contiene al bloque rojo, sin embargo por tener dimensiones iguales se encuentran en la misma posición; a partir de ella haremos una traslación del bloque rojo, 150 píxeles positivo, es decir hacia la derecha y 80 píxeles positiva, es decir hacia abajo; veamos el resultado.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 200px;
    height: 180px;
    background-color:yellow;
    border: 2px solid black;
  }
  div.rojo {
    width: 200px;
    height: 180px;
    background-color:red;
    transform: translate(150px, 80px);
  }
</style>

Prueba a cambiar dichas transformaciones con otros valores y ejecuta el código de nuevo y verás las diferencias, incluso puedes probar con los valores negativos.

Transform: skew

La función skew nos permite sesgar un elemento, es decir podemos ladear o inclinar un elemento en cierta medida, la misma que estará determinada por un ángulo de inclinación horizontal y vertical.

• skewX(a).- este método sesgará a los elementos a lo largo del eje X, es decir, horizontalmente. Donde «a» es el ángulo de inclinación.
• skewY(a).- este método sesgará a los elementos a lo largo del eje Y, es decir, verticalmente. «a» es el ángulo de inclinación.

Ejemplo de skewX(a)

<div class="sesgarx"></div>
<style>
  div.sesgarx {
  width:200px;
  height:150px;
  background-color:orange;
  margin:50px;
  transform:skewX(30deg);
  }

Ejemplo de skewY(a)

<div class="sesgary"></div>
<style>
  div.sesgary {
  width:200px;
  height:150px;
  background-color:orange;
  margin:70px;
  transform:skewY(30deg);
  }

El método skew(a,b)

También podemos inclinar ambos al mismo tiempo utilizando el método skew directamente, entre paréntesis irán los valores de los ángulos de inclinación separados por coma (,); el primer valor corresponde al eje X y la segunda al eje Y. Veamos un ejemplo.

<div class="sesgar"></div>
<style>
  div.sesgar {
  width:200px;
  height:150px;
  background-color:orange;
  margin:70px;
  transform:skew(20deg,20deg);
  }

Transform: scale

Mediante transform: scale() podemos escalar las dimensiones de un elemento mediante código CSS, podemos hacer que disminuya o aumente en una proporción determinada; básicamente las dimensiones de un elemento están determinadas por su ancho y altura.

Valores para los paramentos de transform: scale()

Una de las formas de utilizar la transformación de escala en CSS es de la siguiente manera: transform: scale (x,y); donde X y Y son valores numéricos que corresponden al factor de escalamiento, es la cantidad de veces que se aumentará o disminuirá las dimensiones, X en el eje horizontal o ancho y Y en el eje vertical o altura.

X y Y multiplican las dimensiones originales, por lo tanto un valor de 1 hace que la imagen mantenga sus dimensiones originales, un valor de 2 por ejemplo duplicaría, un valor de 3 triplicaría y un valor por debajo del 1 reduciría las dimensiones originales del elemento a escalar, por ejemplo 0.5 reduciría a la mitad.

Otra forma de utilizar transforme escale es:

• transform: scaleX(1); .-  Para escalar únicamente las dimensiones en el eje X, horizontalmente.
• transform: scaleY(1); .-  Para escalar únicamente las dimensiones en el eje Y, verticalmente.

Ejemplo de transform: scaleX()

En el siguiente ejemplo tenemos un bloque azul de forma cuadrada, con lado de 100px; mediante transform:scaleX(3); haremos que triplique su dimensión a lo largo del eje X, es decir horizontalmente.

<div class="cuadrado"></div>
<style>
  .cuadrado {
  width: 100px;
  height:100px;
  background-color: blue;
  margin:100px;
  transform: scaleX(3);
  }
</style>

Ejemplo de transform: scaleY()

Mediante transform: scaleY(3); haremos que un bloque azul cuyo ancho y alto es de 100px, triplique su dimensión en el eje vertical, veamos.

<div class="cuadrado"></div>
<style>
  .cuadrado {
  width: 100px;
  height:100px;
  background-color: blue;
  transform: scaleY(3);
  }
</style>

Ejemplos de escala CSS3

A continuación veremos un ejemplo de transform:scale(); se trata de tres bloques: rojo, amarillo y azul, inicialmente, los tres tienen dimensiones de 120x70px, bordes sólidos de 1px, margen de 60px y están dispuestos como bloques en línea; posteriormente colocamos un color de fondo a cada bloque. Ahora lo que nos interesa, el primer bloque es el rojo y no se le aplica ninguna escala, el segundo es amarillo y se le aplica un escalamiento de 2, y duplicará su tamaño inicial; el tercer bloque es azul y se le aplica una reducción de 0.5, es decir sus dimensiones se reducirán a la mitad.

<div class="rojo">ROJO</div>
<div class="amarillo">AMARILLO</div>
<div class="azul">AZUL</div>
<style>
  .rojo, .amarillo, .azul {
    width:120px;
    height:70px;
    border:1px solid black;
    margin:60px;
    display:inline-block;
  }
  .rojo {background-color:red;}
  .amarillo {
  background-color:yellow;
  transform:scale(2);}
  .azul {
  background-color:blue;
  transform:scale(0.5);}
</style>

Múltiples transformaciones

La propiedad transform nos permite establecer múltiples transformaciones a la vez, es decir en una misma declaración, por ejemplo podemos rotar, trasladar y escalar un elemento al mismo tiempo.

Para poner múltiples transformaciones simplemente declaramos la propiedad transform y después de los dos puntos empezamos a establecer las transformaciones separándolos con espacios y finalmente cerrando con un punto y coma (;) como siempre lo hacemos. Veamos algún ejemplo.

Ejemplo de mutiples trasformaciones con CSS3

A continuación haremos que un elemento sea rotado, trasladado y además escalado, veamos:

<div class="multiple"></div>
<style>
  .multiple {
  width: 100px;
  height:100px;
  background-color: blue;
  transform: rotate(20deg) translate(250px, 100px) scale(3);
  }
</style>

Transformaciones en 3D

Ahora podemos realizar transformaciones en 3 dimensiones (3D), básicamente se agrega un nuevo eje, el eje Z, que corresponde al eje que entra y sale de la pantalla; recordemos que el eje X es el eje horizontal, el eje Y es el vertical y ahora tenemos el eje Z, en palabras simples es la que entra y sale de la pantalla.

Observa la siguiente imagen, se trata de los tres ejes cartesianos, pero debes asumir que el eje Z es la que sale perpendicularmente desde tu pantalla, en este caso lo hemos representado para que puedas ver. Las transformaciones en 3D se realizarán en torno a los ejes mostrados.

Rotaciónes 3D con CSS

Ahora es posible rotar un elemento alrededor de un solo eje, como veremos a continuación con sus respectivos ejemplos y además es posible rotar un elemento alrededor de los tres ejes al mismo tiempo mediante el método rotate3d() como veremos más adelante.

Rotatex()

El método rotateX() hará que ele elemento rote sobre el eje X, es decir sobre el eje horizontal; los valores del ángulo de rotación pueden ser positivos o negativos, positivos sentido horario y negativos sentido antihorario.

Se puede rotar alrededor del eje X horizontal mediante el método rotateX(); Imagina rotar un bloque sobre el eje X, posiblemente no notemos mucho la diferencia, pues la rotación se hará en torno al eje horizontal, como si rotaras la pantalla de una laptop hacia atrás o adelante, para que entiendas.

Entonces al ver de frente solo notarás que visualmente y solo aparentemente cambia la altura, sin embargo debes tener en cuenta que en realidad está rotando. ¿Existe la forma de ver dicha rotación desde otra perspectiva? Sí, es posible haciendo uso de la propiedad perspective que conoceremos más adelante.

Ejemplos de rotateX()

Ejemplo 1.- En el siguiente ejemplo rotaremos una imagen de 200px de ancho y 200px de altura, en torno al eje X horizontal; el ángulo de rotación es 75deg, notarás que aparentemente la altura se reduce, sin embargo está rotando, veamos.

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/06/28/05/32/abstract-1483995_960_720.jpg">
<style>
  .imagen {
  width: 200px;
  height:200px;
  transform: rotateX(75deg);
  }
</style>

Ejemplo 2.- Imagina si rotamos un elemento 90 grados ¿Cómo crees que sería el resultado? Pues posiblemente deje de ser visible para nuestra vista, ya que el elemento al no tener espesor, básicamente quedará totalmente en el plano, (como si cerraras la pantalla de tu laptop completamente), y al no tener un espesor, el elemento queda básicamente invisible; veamos.

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/06/28/05/32/abstract-1483995_960_720.jpg">
<style>
  .imagen {
  width: 200px;
  height:200px;
  transform: rotateX(-90deg);
  }
</style>

RotateY()

El método rotateY() nos permite rotar un elemento sobre el eje Y, es decir en el eje vertical, funciona similar al anterior tipo de rotación, simplemente cambia el eje de rotación.

Ejemplo de rotatey()

En el siguiente ejemplo tenemos una imagen de forma cuadrada, ya que tanto su ancho como su alto son de 200px, haremos una rotación de 70deg sobre el eje Y o vertical, esto hará que la imagen pareciera que se vuelve más delgada, como si su ancho se redujera, sin embargo debemos tener en cuenta que en realidad está rotando no cambiando de dimensión.

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/06/28/05/32/abstract-1483995_960_720.jpg">
<style>
  .imagen {
  width: 200px;
  height:200px;
  transform: rotateY(70deg);
  }
</style>

Si la rotación en Y fuera de 90deg, visualmente desaparecería la imagen, ya que estaríamos frente al espesor de elemento que básicamente es imperceptible, o por así decirlo. Prueba a cambiar valores y notarás la diferencia.

Rotatez()

El método rotateZ() hace que los elementos roten respecto al eje Z; para que entiendas, es el eje que sale perpendicularmente de tu pantalla; rotar un elemento sobre ella evidentemente será notorio, básicamente el elemento rotará en la misma pantalla. Veamos un ejemplo.

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/06/28/05/32/abstract-1483995_960_720.jpg">
<style>
  .imagen {
  width: 200px;
  height:200px;
  margin: 50px;
  transform: rotateZ(30deg);
  }
</style>

Rotate3D()

También es posible hacer una rotación de un elemento en los tres ejes al mismo tiempo, para ello usamos el método rotate3d(x, y, z, a); (x,y,z) es un vector que define el eje de rotación y a es un ángulo de rotación. Observa, los valores están separadas por comas.

Ejemplo de rotate3d(x,y,z,a)

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/06/28/05/32/abstract-1483995_960_720.jpg">
<style>
  .imagen {
  width: 200px;
  height:200px;
  margin: 50px;
  transform: rotate3d(1, 1, 1, 40deg);
  }
</style>

Traslación 3D con CSS

Trasladar elementos en 3D simplemente consiste en trasladar elementos a lo largo de los ejes X, Y, Z, la translación se puede realizar en un solo eje o si prefieres hacerlo en los tres ejes al mismo tiempo mediante la propiedad translate3D(a,b,c);

Translate x

El método translatex() nos permite trasladar un elemento a lo largo del eje X, es decir horizontalmente.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 200px;
    height: 180px;
    background-color:yellow;
  }
  div.rojo {
    width: 200px;
    height: 180px;
    background-color:red;
    transform: translatex(100px);
  }
</style>

Translate y

Mediante translatey() podemos trasladar un elemento a lo largo del eje Y, es decir desplazar sobre el eje vertical.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 200px;
    height: 180px;
    background-color:yellow;
  }
  div.rojo {
    width: 200px;
    height: 180px;
    background-color:red;
    transform: translatey(90px);
  }
</style>

Translate z

Trasladar un elemento a lo largo del eje Z ahora es posible, podemos hacer que un elemento se desplace en el eje perpendicular que sale de la pantalla. Visualmente da la sensación de que el elemento no cambia, sin embargo, si se traslada a lo largo del eje Z. Dicho cambio se puede observar usando la propiedad de perspective, las mismas que conoceremos al final de esta lección.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 200px;
    height: 180px;
    background-color:yellow;
  }
  div.rojo {
    width: 200px;
    height: 180px;
    background-color:red;
    transform: translatez(150px);
  }
</style>

Translate 3d

También es posible realizar una translación el espacio R3, es decir hacer que la traslación se realice en el eje X, Y, Z al mismo tiempo, para ello hacemos uso del método translate3d(a,b,c); donde a, b y c son longitudes de desplazamiento sobre los ejes X, Y y Z respectivamente. Veamos un ejemplo.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 200px;
    height: 180px;
    background-color:yellow;
  }
  div.rojo {
    width: 200px;
    height: 180px;
    background-color:red;
    transform: translate3d(150px, 80px,30px);
  }
</style>

La propiedad perspective CSS3

Mediante la propiedad perspective podemos establecer una cierta perspectiva que nos permita visualizar mejor a los elementos transformados en 3d. Básicamente se trata de establecer una distancia entre el elemento y un observador, es decir tendrá un efecto de acercamiento o alejamiento dependiendo de los valores que tome la propiedad perspective. En otras palabras, establece una cierta profundidad para que los elementos se creen en un espacio 3D.

La propiedad perspective afecta a los elementos hijos de un elemento padre, por ende no se debería usar directamente con un elemento, sino, para conseguir el efecto se debe aplicar a su elemento padre. Esto hará que dicho padre se comporte como un contenedor 3D para que sus hijos puedan mostrarse en 3D.

Una cierta perspectiva nos permite observar un elemento desde un punto de visita determinado, desde dicho punto, las dimensiones, forma, volumen, posición, etc. de un elemento se perciben de una manera y desde otro punto de vista se ven de otra manera.

Valores para perspective

Los valores para la propiedad perspective son números con su respectiva unidad de longitud, por ejemplo píxeles (px), em, etc. Valores mayores a 0 harán que los objetos se acerquen en el eje Z, por ende se perciben más grandes y valores negativos harán que el objeto se aleje, por ende se perciben más pequeños.

Por ejemplo, observar tu casa a una distancia cercana, no es lo mismo que observarla desde una distancia más lejana ¿Verdad? Pues si, y dentro de las pantallas ocurre algo similar, o por así decirlo, para que entiendas. Además también puedes cambiar la posición de donde se observa y no solo la distancia, todo ello influirá en la forma en la que se percibe el objeto; de manera similar ocurre con los elementos y perspectivas dentro de la pantalla o por así decirlo, para que entiendas.

Es posible establecer desde que distancia y posición se observa un elemento, esto se vuelve interesante cuando se trata de observar elementos en 3D.

Ejemplo de perspective CSS3

Ejemplo 1.- En el siguiente ejemplo vamos a trasladar un elemento a lo largo del eje Z, pero esta ves pondremos una perspectiva al contenedor, de tal manera que el elemento hijo pueda observarse con la perspectiva que determinemos. En nuestro caso, el bloque amarillo contiene al bloque rojo, es decir amarillo es padre del hijo rojo; por lo tanto la perspectiva aplicaremos al padre amarillo.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 300px;
    height: 300px;
    background-color:yellow;
    perspective: 400px;
  }
  div.rojo {
    width: 100px;
    height: 100px;
    background-color:red;
    position: relative;
    top:100px;
    margin: auto;
    transform: translatez(200px);    
  }
</style>

Ejemplo 2.- Ahora veamos el mismo ejemplo anterior, pero con un valor de traslación sobre el eje Z igual a cero, en dicho caso el elemento se mostrará con sus dimensiones originales.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 300px;
    height: 300px;
    background-color:yellow;
    perspective: 400px;
  }
  div.rojo {
    width: 100px;
    height: 100px;
    background-color:red;
    position: relative;
    top:100px;
    margin: auto;
    transform: translatez(0px);    
  }
</style>

Ejemplo 3.- Ahora aplicaremos una traslación negativa, gracias a la propiedad perspective aplicada al elemento padre, ahora podemos notar que el elemento hijo se aleja de la vista y da la sensación de que se vuelve más pequeña.

<div class="amarillo"><div class="rojo"></div></div>
<style>
  div.amarillo {
    width: 300px;
    height: 300px;
    background-color:yellow;
    perspective: 400px;
  }
  div.rojo {
    width: 100px;
    height: 100px;
    background-color:red;
    position: relative;
    top:100px;
    margin: auto;
    transform: translatez(-200px);    
  }
</style>

Si en los ejemplos anteriores quitamos la propiedad de perspective al elemento padre, notaremos que los efectos de acercamiento o alejamiento cuando se traslada el elemento hijo al lo largo del eje Z, no tendrán un efecto visual, aunque el hijo se esté trasladando. Gracias a la propiedad perspective es que podemos notar dicho efecto de acercamiento y alejamiento de un elemento en la pantalla.

Utilizar la propiedad perspective de CSS3 se hace más interesante cuando se manipulan elementos en tres dimensiones, podemos percibir como los objetos se ven desde una determinada perspectiva.

La propiedad perspective-origin

Mediante la propiedad perspective-origin podemos establecer el origen de la perspectiva, es decir desde donde se ve, el punto de vista, por defecto el origen de perspectiva se encuentra en el centro de un elemento, esto podemos cambiar a una posición diferente.

Valores para perspective-origin

Los valores que puede tomar la propiedad perspective-origin pueden desde palabras clave hasta números con su respectiva unidad, en este caso porcentajes.

A lo largo del eje X, podemos establecer valores de: left (izquierda), right (derecha) y center (centro); en valores porcentuales, left es lo mismo que 0%, center equivale a 50% y right equivale a 100%.

A lo largo del eje Y, podemos establecer valores de: top (arriba), bottom (abajo), center (centro); en este caso los valores porcentuales, top equivale a 0%, center al 50% y bottom al 100%.

Ejemplos de sintaxis

Por ejemplo para llevar el origen de perspectiva a superior derecha seria: perspective-origin: right top; que seria lo mismo que perspective-origin: 100% 0%;

Ejemplo de perspective-origin

Ejemplo 1.- En el siguiente ejemplo haremos que el punto de vista, es decir el origen de perspectiva será llevado al 40% en X y 80% en Y, nuestro elemento es un cuadrado de 50px de lado, haremos una rotación en el eje Y, la perspectiva colocaremos a 250px y listo, ahora veamos cuál es el resultado. Prueba a cambiar y jugar con los valores y comprueba cómo cambia el resultado.

<div class="padre">
	<div class="hijo">BLOQUE ROTANDO EN EJE Y</div>
</div>

<style>
div.padre {
  width:200px;
  padding:40px;
  margin:auto;
  border: solid 1px black;
  perspective: 250px; 
  perspective-origin: 40% 80%;
}
div.hijo {
  width: 50px;
  padding: 50px;
  margin:auto;
  text-align: center;
  background: #ffaa6e;
  transform: rotatey(35deg);
}
</style>

Ejemplo 2.- Ahora veamos el mismo ejemplo que el anterior, pero esta vez llevaremos el origen de perspectiva perspective-origin a la esquina superior (top) y hacia la izquierda (left) y veamos como cambia el resultado.

<div class="padre">
	<div class="hijo">BLOQUE ROTANDO EN EJE Y</div>
</div>

<style>
div.padre {
  width:200px;
  padding:40px;
  margin:auto;
  border: solid 1px black;
  perspective: 250px; 
  perspective-origin: left top;
}
div.hijo {
  width: 50px;
  padding: 50px;
  margin:auto;
  text-align: center;
  background: #ffaa6e;
  transform: rotatey(35deg);
}
</style>

Ahora que hemos terminado con las transformaciones en CSS3, pasaremos a otra lección aún más espectacular, de trata de animaciones, así que vamos por ello.

[popup_anything id=»5821″]