CODEWITHSUNDEEP
htmlcss
aroooo
aroooo

Reputation: 5066

CSS: Skew & Rotate Troubles

I'm trying to get the left red div to skew and rotate to be exactly like the one on the right. However, no amount of skewing, scaling, translating, and rotating seems to get it right. This is essentially a YouTube iframe I want to play at an angle.

In my design tool tool after the rotation I did have to scale the X axis to make it look like the black rectangle, which is fine too. But I cannot seem to find the right offsets to make it look like this.

enter image description here

Upvotes: 1

Views: 906

Answers (2)

A Haworth
A Haworth

Reputation: 36522

The div needs to rotate about the Y axis and you need perspective to see the 3D effect. There is no skewing needed.

Something like:

#outerdiv {
  width: 100px;
  height: 100px;
  perspective: 100px;
  position:relative;
  top:100px;
}
#innerdiv {
  width:100%;
  height:100%;
  background-color:red;
  transform-style: preserve-3d;
  transform: rotateY(-45deg);
}
      
<div id="outerdiv">
  <div id="innerdiv">
  </div>
</div>

Upvotes: 1

Eddie Reeder
Eddie Reeder

Reputation: 835

I think you're looking for 3D CSS transformations. Have a play with perspective and rotateY to get a result you're happy with.

.box {
  width: 18rem;
  height: 10rem;
  background-color: red;
  border-radius: 1rem;  
  transform: perspective(50rem) rotateY(-40deg)
}
<div class="box"></div>

Upvotes: 3

Related Questions