Transform skew without changing element position

Question

I have created the following markup (an example to demonstrate) with a CSS skew transform:

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

The problem is that the inner div .inner is being position outside of the container .wrapper even though I set right to 0 because the inner div is skewed 30 degrees. How can I position the inner div with the right most part being at the same position? I could hard code the value of right, but it would appear differently with different screen sizes. If I set the overflow of the outer div to hidden, the right side would still be misaligned. I've seen this post which suggests using transform-origin and -webkit-transform-origin, which I set to right, but none of the solutions worked. What can I do?

score 2 · Accepted Answer · answered Dec 28 '21 at 08:03

2

You need transform-origin: bottom

.wrapper {
  height: 100px;
  width: 200px;
  position: relative;
  background-color: orange;
}
.inner {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: skew(30deg);
  transform-origin: bottom;
  background-color: blue;
  opacity: .7;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

answered Dec 28 '21 at 08:03

Temani Afif

245,468
26
309
415

Thanks for the answer! It worked. I'm just wondering, how come `transform-origin` didn't work when I put in `right` instead of `bottom`? How will I be able to choose the correct one? – code Dec 28 '21 at 19:35
@code you need to get familiar with how transformations works. Here is a detailed answers if you want: https://stackoverflow.com/a/52093362/8620333 – Temani Afif Dec 28 '21 at 19:36

Transform skew without changing element position

1 Answers1