enfrost enfrost - 1 month ago 8
CSS Question

How do I match a div's height to another divs perspective height?

What I am trying to achieve is matching the middle div's height to the right side of the left div's height & left side of the right div's height.

I have tried scale which works to start but if you adjust the window size the scale doesn't match.

Any thoughts? Thanks for your help!

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
padding: 50px;
width:15%;
border: 1px solid black;
background-color: red;
display: inline-block;
transform: perspective(13.5em) rotateY(5deg);
}

#div2 {
padding: 50px;
width:15%;
border: 1px solid black;
background-color: blue;
display: inline-block;
}

#div3 {
padding: 50px;
width:15%;
border: 1px solid black;
background-color: red;
display: inline-block;
transform: perspective(13.5em) rotateY(-5deg);
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>

Answer

First of all, let's increase the angle of rotation so that it's easier to see the problem.

Now, the solution: you want the inner edges of the rotated elements to match the size of the non rotated element.

Just set the transform origin to this border. This way, the said border isn't moving, and it matches naturally the size of the inner div

#div1 {
  background-color: red;
  transform: perspective(13.5em) rotateY(30deg);
  transform-origin: right center;
}
#div2 {
  background-color: blue;
}
#div3 {
  background-color: red;
  transform: perspective(13.5em) rotateY(-30deg);
  transform-origin: left center;
}

div {
  width: 15%;
  border: 1px solid black;
  margin-top: 30px;
  padding: 50px;
  display: inline-block;
}
<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

Comments