Cómo usar la perspectiva con opciones de transformación para diseñar paredes de fotos en 3D

Diseñar una pared de fotos en 3D parece posible solo usando un editor de fotos como Photoshop o boceto. ¡Pero no lo es! En estos días hay muchos modelos aparentemente imposibles que puedes construir en la web usando solo CSS. Y con un constructor de páginas como Div, ni siquiera necesita saber demasiado sobre CSS para crear este tipo de modelos. Es por eso que, hoy, te mostraré cómo diseñar paredes de fotos en 3D en el Div. El truco es usar la propiedad CSS Perspective. Con una sola línea CSS agregada a un elemento principal, puede usar las opciones de transformación incrustadas de la división para rotar los elementos en modelos 3D similares a la vida.
¡Vamos a empezar! Tire con el ojo aquí hay una breve mirada a las paredes fotográficas 3D que diseñaremos hoy.





Descargue los ejemplos gratuitos de diseño de pared 3D de pared para poner sus manos en los dibujos 3D de este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis.Sigue a ti mismo y serás una división maestra en el menor tiempo.Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente.¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Suscríbase a nuestras nociones básicas del canal de YouTube para comenzar con este tutorial, todo lo que necesita es el tema instalado y activo. Necesitará algunas imágenes para trabajar, así que no dude en usar las mismas imágenes que uso del paquete de diseño de la agencia de viajes. Después de eso, deberá crear una nueva página, dar la página y el título e implementar Divi Builder para construir en el frente. Luego seleccione la opción “Build de cero”. Eso es todo. ¡Tu lienzo de diseño te está esperando! Entendiendo cómo funciona la perspectiva con las opciones de transformación si alguna vez ha tomado un curso de arte básico, probablemente esté familiarizado con la perspectiva. Es una técnica utilizada por los artistas para dibujar objetos que parecen ser 3D, incluso si existe en una hoja de papel o lienzo 2D. En el diseño web, puede colocar elementos en posiciones 3D utilizando la propiedad de transformación. En la división, estas opciones de transformación se incorporan al Builder Divi. La principal propiedad de transformación que coloca un elemento en una posición 3D es el giro de la transformación, lo que le permite rotar los elementos a lo largo de los ejes Z, X o Y. Sin embargo, si gira un elemento usando la rotación de transformación, el elemento no aparecerá como 3D a menos que se aplique la propiedad de perspectiva. Por ejemplo, suponga que solo tiene un módulo de imagen agregado a una fila de una columna.
Luego use la propiedad de giro de la transformación para rotar la imagen a lo largo del eje x. La imagen girará, pero permanecerá en 2D, de modo que la imagen simplemente parece que se exprimió desde arriba y abajo para acortar.
Ahora, si agrega perspectiva usando un fragmento CSS pequeño al elemento principal de la fila (que es un elemento parental de la imagen), agregue la perspectiva a la imagen. Dependiendo del valor de la perspectiva, puede aumentar o disminuir la distancia en la que aparece el objeto del usuario que mira la pantalla. Aquí hay un ejemplo de cómo se verá la imagen si agrega “Perspectiva: 600px” en una fila.

Puede ver que la parte superior de la imagen es más pequeña y la parte inferior de la imagen es mayor, creando el efecto 3D de la perspectiva. Básicamente, la imagen muestra a 900 PX del usuario que visualiza la página. En este tutorial, usaré la misma técnica para rotar una fila completa de imágenes y luego agregar perspectiva a la sección principal para crear paredes de fotos en 3D. Diseño de paredes fotográficas en 3D desde la parte superior e inferior

En este primer diseño, agregaremos una pared fotográfica 3D en la parte superior y en la parte inferior de un solo tipo de texto que se puede usar como título. Aquí le mostramos cómo hacerlo.

Creando la pared de fotos 3D superior para comenzar las cosas en su nueva página, cree una sección de fila de cuatro columnas regular.

En la columna 1, agregue un módulo de imagen con su primera imagen. Todas las imágenes que uso en este ejemplo son 600 x 800 PX. Después de cargar la imagen en el módulo de imagen, actualice el relleno de la siguiente manera: revestimiento personalizado: 3% arriba, 3% de baja, 3% izquierda, 3% duplicado derecho (o copia y pegamento) la imagen y agrégalas a cada uno de los cuatro Columnas, de modo que tenga tres imágenes en cada una de las cuatro columnas.
Esto servirá como una pared superior (o techo) que giraremos y agregaremos perspectiva para crear el diseño de la pared 3D. Personalice la sección para agregar perspectiva y ocultar la superación porque rotaremos la línea (no imágenes individuales), debemos agregar la propiedad de perspectiva al padre de los padres, que es la sección. Y para evitar que las imágenes salgan del contenedor de sección, debemos agregar sobre el desbordamiento vertical y horizontal. Para esto, abra la configuración de la sección y actualice lo siguiente: Wallpaper: # 000000 Interweaving personalizado: 0 PX hacia arriba, 0 PX hacia abajo para agregar propiedad de perspectiva, agregue los siguientes CSS personalizados al elemento principal: Elemento principal CSS: Perspectivas: 400px;

Ver Propiedades de vertido de la siguiente manera: Overflow Horizontal: Overflow vertical: Oculto

Actualice la configuración de la fila: el ancho y el ancho de la canaleta ahora es el momento de personalizar el giro para prepararlo para el diseño 3D rotado. Para hacer esto, reduciremos el ancho y eliminaremos cualquier ventaja entre las imágenes actualizando el ancho de la canaleta. Abra la configuración de la fila y actualice lo siguiente: GGGeab Ancho: 1 Ancho: 300 PX (escritorio, tableta y teléfono)
Actualice la configuración de la fila: gire la rotación y el origen ahora use la opción de rotación transformada para rotar la fila de la siguiente manera: girar el eje de rotación y: -58 grados
Cambie el origen de la transformación de la siguiente manera: Transformación del origen: centro inferior (o 100% 50%)

Actualice la configuración de la fila: anchos de columna personalizados porque queremos que las cuatro columnas permanezcan en las tablas de la tableta y el teléfono, debemos reemplazar CSS por el ancho de la columna en esos puntos de interrupción. Para hacer esto, debemos agregar una propiedad de ancho CSS a cada una de las columnas. En la pestaña avanzada, agregue el siguiente fragmento CSS personalizado al elemento principal de cada columna, de la siguiente manera: (Nota: Asegúrese de que el ancho de canaleta esté configurado en 1 o esto no funcionará) Columna 1 Elemento principal: ¡ancho: 25%! importante;

Columna 2 Elemento principal: Ancho: 25%! Importante;

Columna 3 Elemento principal: Ancho: 25%! Importante;

Columna 4 Elemento principal: Ancho: 25%! Importante;

Eso es todo. Nuestra primera pared de fotos en 3D fue creada. Cree la sección de títulos para crear nuestro título de diseño, debemos crear una nueva sección habitual con una fila con una columna directamente debajo de la sección actual.
Antes de agregar un módulo, actualice la sección con un fondo negro: color de fondo: # 000000
Luego agregue la misma propiedad de perspectiva al elemento principal de la sección, como lo hicimos antes, de la siguiente manera:
Luego agregue un módulo de texto en fila con lo siguiente: Contenido: Fuente Fuente Texto: TITillium Estilo de texto web: TT Texto Color: #fffff Texto: 5VW Letra de texto: 6 PX Altura de línea de texto: 1EM Orientación Texto: Centro

Ahora podemos agregar una rotación de transformación al módulo de texto. Con la perspectiva establecida en el padre (o sección), el efecto 3D ocurrirá una vez que giremos el texto. Agregue los valores de rotación de la transformación de la siguiente manera: gire la rotación del eje x: -12 grados Axis de giro y: 32 Gradea Estamos listos para crear la pared fotográfica inferior 3D. Cree la pared fotográfica 3D a continuación (o piso) para crear la pared de fotos 3D inferior, simplemente podemos copiar y pegar la sección superior que contiene la pared superior y pegarla directamente debajo de la sección del título.

Luego actualice la nueva configuración de la nueva sección de la siguiente manera: Eje de rotación de giro Y: 58 grados Transformación de origen: Centro superior

Diseño final, ¡eso es todo! Verifiquemos el diseño final.

El diseño también permanecerá intacto y móvil (aparte de un pequeño desbordamiento).

Creando paredes fotográficas 3D izquierda y derecha

Para el siguiente diseño, crearemos paredes fotográficas en 3D en el lado izquierdo y derecho de nuestra sección, en lugar de arriba e inferior. Para comenzar rápidamente el proceso de diseño, utilizaremos algunos de nuestros proyectos preconstruidos en nuestro primer ejemplo. A partir del principio, copie la sección inferior del primer ejemplo de diseño que contiene la pared inferior. Luego abra la configuración de fila de la nueva sección y restablezca las opciones de transformación nuevamente al estado predeterminado.

El siguiente duplica el giro.

Luego copie el giro (no la sección) que contiene el módulo de texto con el título en el primer ejemplo de diseño. Luego pégalo entre las dos filas que contienen las imágenes.

Esta es una configuración similar al primer diseño, excepto todas nuestras líneas dentro de una sección. Esto es importante para el siguiente paso. Queremos que nuestras paredes de las imágenes estén a la izquierda y a la derecha de la página, con el texto en el centro. Una manera fácil de hacerlo es usar la pantalla Flex en nuestra sección. Esto alineará nuestras filas horizontalmente en la sección. Para hacer esto, abra la configuración de la sección y agregue los siguientes elementos CSS personalizados al elemento principal: (Observe que aumentamos el valor de la perspectiva a 700 PX para crear una mayor distancia desde el “espacio z” desde la perspectiva del usuario: Perspectivas: 700px; pantalla: flexión;

¡Y voilá! Nuestras paredes están en su lugar y están listas para rotar. Agregue más imágenes para una pared superior para que la pared fotográfica 3D sea un poco más alta, todo lo que tenemos que hacer es agregar otra imagen a cada una de las cuatro columnas en cada una de las filas que contienen imágenes. Asegúrese de que lleven más del 3% del forro como los demás.

Cambiando el ancho de las dos filas laterales antes de rotar la pared de nuestra imagen, primero debemos ajustar su ancho al 100%. Abra la configuración de la fila para las paredes del lado izquierdo y actualice lo siguiente: Ancho: 100% (escritorio, tableta, teléfono) Ancho máximo: 100%

Luego haga lo mismo para el giro en el lado derecho.

Rotando las filas laterales para el efecto 3D Ahora estamos listos para agregar la rotación de la transformación a cada una de nuestras líneas. Primero, abra la configuración de la fila para la fila izquierda y actualice lo siguiente: Transformación del eje de rotación: 90 grados

Luego, abra la configuración de la fila para la fila a la derecha y actualice lo siguiente: Rotación del eje X: -90 Graduando nuestra perspectiva en el nivel de sección, nuestras líneas se mostrarán como paredes fotográficas 3D en cada lado de nuestro módulo de texto. Resultado final para verificar el resultado final.
Para poner un poco de cereza en el pastel, puede agregar un fondo con elementos gráficos 3D. Aquí hay un ejemplo de un diseño con una imagen de fondo tomada del paquete de apariencia de criptomoneda.

Efecto de bonificación flota: ¡gire esas paredes a la vista sobre el flotador! Puede agregar fácilmente un efecto de transformación de rotación de desplazamiento que permitirá al usuario ver la pared de la imagen girándola en la vista de desplazamiento. Para esto, abra la configuración de la fila izquierda y actualice lo siguiente: Transformación del origen: Axis de transformación del centro izquierdo X (movimiento): 0 grados

Luego, en la configuración correcta a la derecha, actualice lo siguiente: Transforme el origen: el centro de la rotación del eje x (movimiento): 0 grados ahora verifique el resultado.

Efecto de diseño de bonificación: haga que las imágenes se rompan en el espacio porque la fila se gira con la perspectiva en su lugar, puede mover las imágenes a su turno utilizando la transformación transformada. Lo interesante de esto es que el movimiento permanecerá a lo largo del plano 3D. Para hacer esto, simplemente abra la configuración de una imagen y use la opción de transformación de transformación para mover la imagen fuera de la cuadrícula al espacio.

Aquí hay un ejemplo de cómo se vería esto al agregar algunos valores traducidos en imágenes.