Cómo crear diseños 3D con la propiedad de transformación CSS3

Hay dos dimensiones cuando se trata de la propiedad de transformación CSS3, 2D y 3D. Al animar, las transformaciones se utilizan para hacer que un elemento cambie de un estado a otro. Este tutorial sirve como una expansión de esta guía sobre animaciones 2D. Brindaré información sobre el diseño 3D y cómo puede crear animaciones increíbles combinando estos conceptos básicos.

Las transformaciones 3D pueden ser bastante detalladas y pueden volverse complejas si hay muchas piezas diferentes combinadas, por lo que es útil comenzar con los bloques de construcción básicos. Algunos de estos conceptos le resultarán familiares, pero la "z" es algo que parecerá nuevo cuando trabaje en 3D. Las transformaciones 3D amplían las transformaciones CSS 2D para incluir el eje z, lo que permite transformaciones 3D de elementos DOM.

¿Qué es el eje z?

Habrá mucha referencia al eje z. Es fácil pensar en ello como la distancia de medición de algo que se acerca o se aleja de usted. Si es un valor positivo, está más cerca de ti. Si es un valor negativo, está más lejos de ti.

Ejemplos de transformación 3D

Las propiedades básicas para la transformación 3D son translate3d , scale3d , rotateX , rotateY , rotateZ , perspective y matrix3d . Se incluyen más argumentos con translate3d , scale3d y matrix3d ​​porque toman argumentos para x, y y z. La propiedad de escala toma un valor para un ángulo y la perspectiva también toma un valor único.

Traducir

traducirZ()

Esto define una traducción 3D usando solo el valor del eje z. Puede recordar traducir x e y de 2D translate. La idea es la misma con translateX() , translateY() y translateZ() porque cada uno toma un valor de longitud que mueve el elemento la distancia especificada a lo largo del eje correcto.

En este ejemplo, translateZ(-20px) alejaría el elemento 20 píxeles del espectador.

Aquí está el fragmento de código para crear este ejemplo:

-webkit-transform: translateZ(-20px);
-ms-transform: translateZ(-20px);
transform: translateZ(-20px);

traducir3d()

La función translate3d() se usa para mover la posición del elemento en un espacio 3D. Esta transformación se crea especificando coordenadas que definen cuánto se mueve en cada dirección.

La función transform: translate3d(20px, -15px, 70px); mueve la imagen 20 píxeles a lo largo del eje x positivo, 15 píxeles en el eje y negativo y luego 70 píxeles a lo largo del eje z positivo.

Aquí hay un ejemplo de translate3d :

-webkit-transform: translate3d(20px, -15px, 70px);
-ms-transform: translate3d(20px, -15px, 70px);
transform: translate3d(20px, -15px, 70px);

Es bastante evidente que hay cierta superposición del segundo cuadrado. Puede que no se vea tan dramático como se esperaba, pero agregar la propiedad de perspectiva (más adelante en este tutorial) ayudará.

La propiedad de perspectiva se agregó a este ejemplo.

Girar

La función rotate3d() rota el elemento en el espacio 3D por el ángulo especificado alrededor del eje. Esto se puede escribir como rotate(x, y, z, angle) .

rotarX()

Los valores de píxeles no funcionarán aquí, deben estar en grados. El método rotateX() rota un elemento alrededor de su eje x en un grado dado. ¿Ves cómo el rectángulo es más corto? Se está girando a lo largo del eje x. Este ejemplo muestra la rotación a 55 grados.

-ms-transform: rotateX(55deg); /* IE 9 */
    -webkit-transform: rotateX(55deg); /* Safari */
    transform: rotateX(55deg);

rotarY()

El método de rotaciónY rotateY() rota un elemento alrededor de su eje y. ¿Te das cuenta de que el rectángulo inferior no es tan ancho como el superior? Se gira para que no parezca tan ancho como el rectángulo de arriba porque se gira 60 grados.

-ms-transform: rotateY(60deg); /* IE 9 */
    -webkit-transform: rotateY(60deg); /* Safari */
    transform: rotateY(60deg);

rotarZ()

El método de rotar rotateZ() gira un elemento alrededor de su eje z en un grado específico. En este caso, el valor es de 120 grados.

-ms-transform: rotateZ(120deg); /* IE 9 */
    -webkit-transform: rotateZ(120deg); /* Safari */
    transform: rotateZ(120deg);

rotar3d()

La función rotate3d(1, -1, 1, 45deg) gira la imagen a lo largo del eje y en un ángulo de 45 grados. Es importante tener en cuenta que puede usar valores negativos para rotar el elemento en la dirección opuesta.

Dado que esto es más complejo que las especificaciones de un solo eje, rotate3d se puede desglosar de la siguiente manera: rotate3d(x,y,z,angle) donde x = 1, y = -1, z = 1 y el ángulo de rotación = 45 grados .

El código para darle estilo a esto se ve así:

-ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */
    -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */
    transform: rotate3d(1, -1, 1, 45deg);

Probando lo básico

En el sentido de las agujas del reloj a lo largo del eje x en 45 grados.

transform: rotate3d(1, 0, 0, 45deg);

En el sentido de las agujas del reloj a lo largo del eje y por 45 grados.

transform: rotate3d(0, 1, 0, 45deg);

En el sentido de las agujas del reloj a lo largo del eje z en 45 grados.

transform: rotate3d(0, 0, 1, 45deg);

Vale la pena mencionar que dependiendo de los valores especificados, a veces no se notará una rotación; por ejemplo, esto no sería perceptible: transform: rotate3d(0, 0, 0, 50deg);

Perspectiva

Esta es probablemente la transformación más "dimensional". Aquí es donde literalmente ganarás perspectiva. Si aplica transformaciones 3D a un elemento sin configurar la perspectiva, el efecto resultante no aparecerá como tridimensional. Esto es algo que también podría agregarse a las propiedades anteriores.

Cómo usar transiciones y transformaciones CSS3 para crear animaciones

Se pueden crear animaciones interesantes con CSS3 usando transformaciones y transiciones. Las transformaciones se utilizan para hacer que un elemento cambie de un estado a otro. Los ejemplos serían rotar, mover, sesgar...

Para activar el espacio 3D, un elemento necesita perspectiva. Esto se puede aplicar de dos maneras: usando la propiedad de transform o la propiedad de perspective .

La propiedad de transform se vería así: transform: perspective(600px); y la propiedad de perspectiva se vería así: perspective: 600px; .

Los siguientes ejemplos lo cambiarán entre los dos, así que asegúrese de mirar de cerca el código.

El valor de la perspective determina la intensidad del efecto 3D. Piense en un valor bajo como algo realmente perceptible, como la sensación que produce cuando mira un objeto grande. Cuando hay un valor mayor, el efecto es menos intenso.

La posición del punto de fuga también se puede personalizar. Vale la pena mencionarlo y mucha experimentación, ya que es relevante para la perspectiva CSS. De forma predeterminada, el punto de fuga de un espacio 3D se coloca en el centro. Utilice la propiedad de origen de la perspectiva para cambiar la posición del punto de fuga. Sería algo así como: perspective-origin: 15% 55% .

El ejemplo de la izquierda se estableció en aproximadamente 800 px. La perspectiva en el lado derecho es mucho más drástica, se estableció en 200px.

Escala

escalaZ()

Esto define una transformación de escala 3D dando un valor para el eje z. Debido a que solo se escala a lo largo del eje z, se necesitan otras funciones para demostrar el efecto de escala. ¿Ves cómo el rectángulo está hacia el espectador y cómo muestra realmente la perspectiva?

Para comprender completamente la escala (Z), juegue con el valor y verá que la perspectiva se vuelve "más nítida" con los valores más grandes.

El ejemplo de la izquierda tiene un valor de 2 y el ejemplo de la derecha tiene un valor de 8.

escala3d(x,y,z)

La función scale3d() cambia el tamaño de un elemento y se escribe como scale(x, y, z) . Al igual que scaleZ , no es evidente cómo se ve completamente la perspectiva a menos que se use con perspective .

Este ejemplo usa esto:

-ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */
-webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */
transform: perspective(500px) scale3d(0.8, 2, 0.2);

Una nota rápida: si las tres coordenadas del vector son iguales, la escala es uniforme y no habrá una diferencia notable.

transform: scale3d(1, 1, 1); /* unchanged */

transform: scale3d(2, 2, 2); /* twice the original size */

matriz3d()

¡La matriz 2D puede tomar seis valores, mientras que la matriz 3D toma 16 (una matriz de 4×4)! Sería una publicación muy larga si se cubrieran todos los detalles, por lo que si desea explorar más este concepto, le recomiendo este experimento interactivo matrix3d ​​en Codepen.

Este es el esquema básico de matrix3d: matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) .

Cómo crear animaciones con transformaciones 3D

Ahora que se cubren los conceptos básicos, el siguiente paso es crear animaciones interactivas. Usando transformaciones y transiciones de CSS3, los elementos cambian de un estado a otro rotando, escalando o agregando perspectiva.

Si eres nuevo en las animaciones CSS, es importante que sepas que sin una transición, un elemento transformado cambiaría abruptamente de un estado a otro. Para evitar esto, se puede agregar una transición para que pueda controlar el cambio, dándole una apariencia más suave.

Cómo crear un volteo de cartas

¿A quién no le gusta jugar a las cartas? Este ejemplo presenta una tarjeta de doble cara y puede ver ambos lados al voltearla con una transformación. Si observa la etiqueta del body , gran parte del efecto proviene de la propiedad de perspective . Está configurado para ser 500px. Un valor más bajo como 100px se ve muy "sesgado".

Aquí está el HTML inicial:

<div class="wrapper">
	div class="side-one"></div>
	<div class="side-two"></div>
</div>

El CSS es lo que hace que suceda:

body {
  -webkit-perspective: 500px;
  perspective: 500px;
}

.wrapper {
  -webkit-transition: all 1s ease-in;
  transition: all 1s ease-in;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  margin: 100px auto;
  width: 250px;
  height: 250px;
  cursor: pointer;
}

.wrapper div {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-position: 50% 50%;
    background-size: 150px;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
    color: #FFF;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,.3);
}

.side-one {
  z-index: 400;
  background: #50c6db  url(image.png);
}

.side-two {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
   background: #ef4e65   url(image.png);
}

.wrapper:hover {
  -webkit-transform: rotateY(-1turn);
  transform: rotateY(-1turn);
}

Esto se puede encontrar en Codepen.

Si eres nuevo en las transformaciones, esto puede parecerte interesante: transform: rotate(1turn); Esta unidad es perfecta para nuestra tarjeta porque una unidad de "giro" es exactamente lo que parece, que es un círculo completo.

También he usado un poco de relajación para hacer una forma personalizada de girar. Esto se logra con transition: all 1s ease-in; .

Otra propiedad 3D en el fragmento es transform-style: preserve-3d; . Al incluir esto, permite que el elemento "oscile" en el espacio tridimensional en lugar de quedarse con el elemento principal.

Cómo crear texto con efecto 3D

Este ejemplo se inspiró en un cartel de película antiguo. Hay tantos tipos de letra diferentes que pueden utilizar un gran estilo CSS, por lo que los efectos de tipo únicos son definitivamente posibles. Este texto usa rotate3d y transform3d para darle una transformación única.

El HTML es bastante simple:

<div class="container">
  <div class="text-wrapper">
    <div class="text">New York City</div>
  </div>
</div>

Aquí está el CSS básico:

.container{
  -webkit-perspective: 600;
}

.text {
  transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px);
 }

Se pueden encontrar ejemplos y CSS más detallados en Codepen.

Esperemos que las transformaciones 3D de CSS aporten una nueva dimensión a sus diseños. Utilizar la perspectiva es una excelente manera de hacer que los elementos se vean más dimensionales. Combinado con transiciones, hay muchas posibilidades a la hora de crear animaciones.