How can I move my div deep into the page so as to create a 3D effect?

June 18, 2024

How can I move my div deep into the page so as to create a 3D effect?
I did it in Figma and I wanted to replicate this effect in css, but unfortunately I don’t know how. I tried to use clip-path, transform and other methods and searched for a solution but found nothing and still have this problem.
Anyone knows the solution and would like to help?
Thanks to whoever helps!

What i want:

What i have:

My code:

body {
  background-color: red;
  display: flex;
  justify-content: center;
}

.box {
  width: 430px;
  height: 650px;
  background-color: white;
  border-radius: 10px;
}

<div class="box"></div>

>Solution :

Use transform: rotateY(), but you also need to set a perspective: on an ancestor element (you can’t apply it to the element itself).

I’ve made a quick interative example below with slider inputs you can use to play around with it:

(Also, I don’t think it’s a good idea to set display: flex; on body; but I assume that’s only for demo purposes).

body {
  background-color: red;
  /*display: flex;*/
  justify-content: center;
}

label { background-color: white; border-radius: 7px; }

.boxContainer {
  perspective: 600px;
}

.box {
  width: 430px;
  height: 650px;
  background-color: white;
  border-radius: 10px;

  transform: rotateY(-19deg);
}

<label>Perspective: <input type="range" id="p" min="-1000" max="1000" value="600" oninput="document.getElementById('bc').style.perspective = this.value + 'px';" /></label><br />
<label>rotateY: <input type="range" id="r" min="-360" max="360" value="-19" oninput="document.getElementById('b').style.transform = 'rotateY(' + this.value + 'deg)';"/></label>

<div class="boxContainer" id="bc">
    <div class="box" id="b"></div>
</div>