Cómo lograr “profundidad” con una transformación 3d css

Traemos la mejor respuesta que descubrimos en línea. Queremos que te sea de mucha utilidad y si deseas comentarnos cualquier detalle que nos pueda ayudar a mejorar hazlo libremente.

Solución:

Intente agregar tres tipos de imágenes para crear efectos 3D. Usar transform propiedad con rotación de imágenes para obtener el resultado deseado.

Respuesta de referencia aquí.

.perspective 
    position: relative;
    width: 400px;
    height: 500px;
    transform-style: preserve-3d;
    transition: all 500ms ease-in;
    transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
    transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
    box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    margin-right: 30px;
    display: inline-block;
    margin-left: 30%;


.perspective img 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 500px;
    transform: translateZ(16px);


.bottom,
.left 
    position: absolute;
    width: 400px;
    height: 500px;
    display: block;
    transition: all 1s linear;
    overflow: hidden;
    border-radius: 3px;
    transform: translateZ(16px);


.left 
    transform: rotateY(270deg) translateX(-1px);
    transform-origin: center left;
    width: 18px;


.bottom 
    transform: rotateX(90deg) translateY(15px) translateZ(-480px);
    transform-origin: bottom center;
    height: 18px;


.bottom img 
    transform: rotateX(180deg);
    width: 100%;
    height: 500px;
    left: 0px;

Aquí hay una idea ingeniosa que usa múltiples fondos para simular tal efecto. El truco consiste en agregar 2 degradados semitransparentes para crear el efecto de sombra y luego otros 2 degradados para cortar una pequeña parte de la esquina para obtener la forma 3D.

El resultado puede no ser perfecto para todas las imágenes:

.wrapper 
  display:inline-block;
  perspective:1000px;

.box 
  margin: 50px;
  width:200px;
  height:200px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  background:
  linear-gradient(to bottom right,transparent 49%,#fff 52%) bottom right/14px 10px,
  linear-gradient(to top left,transparent 49%,#fff 52%) top left /10px 14px,
  
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 0 0px/10px 100%,   
  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 100% 100%/calc(100% - 10px) 10px,   
  url(https://picsum.photos/id/1061/1000/800) center/cover;
  background-repeat:no-repeat;

Con su imagen puede tener un gradiente específico como el siguiente:

body 
  background:#ccc;
  

.wrapper 
  display:inline-block;
  perspective:1000px;

.box 
  margin: 50px;
  width:200px;
  height:250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  background:
  linear-gradient(to bottom right,transparent 49%,#ccc 52%) bottom right/16px 10px,
  linear-gradient(to top left,transparent 49%,#ccc 52%) top left /10px 12px,
  
  linear-gradient(#efefef,#efefef) 100% 100%/calc(100% - 10px) 10px, 
  linear-gradient(-226deg,#222428 13px,#ff4946 13px,#ff4946 77px,#592D30 77px,#592D30 100px,#222428 100px,#222428 108px,#efefef 108px,#efefef 161px) 0 0px/10px 100%,      
  
  url(https://foroayuda2.foroayuda.es/wp-content/uploads/2023/03/0-como-lograr-profundidad-con-una-transformacion-3d-css.png) center/cover;
  background-repeat:no-repeat;

valoraciones y reseñas

Si te gusta la programación, tienes la habilidad dejar una división acerca de qué te ha impresionado de esta crónica.

---

---

Utiliza Nuestro Buscador