3D: rotate a div box in CSS

Issue

I am trying achieve a movie-seat-booking project. a div box named screen that is as big movie screen in cinema.

How to achieve that my screen look same as the screen of example. thank you

the example

/*this is my code*/
/*<div class="screen"></div>*/
.screen{
  width: 180px;
  height: 100px;
  background-color: whitesmoke;
  border-radius: .3125rem;
  margin-left: 70px;
  /* X-axis - counter-clockwise. */
  transform: rotateX(-20deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}

this is what I made

Solution

You can use perspective css property.Setting the property on a parent container gives its children a 3D space.

.wrapper {
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.square {
  width: 500px;
  height: 200px;
  transform: rotateX(320deg);
  background: rebeccapurple;
}
 <div class="wrapper">
   <div class="square"></div>
 </div>

Answered By – Sigma

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published