How to revert skew + rotate transformations on children CSS

user_11434507 0
Viewed 32

#ace {
width: 50vw;
height: 50vw;
background: green;
transform: skewY(-45deg) rotateX(30deg);
}

#bace {
width: 50%;
height: 50%;
background: black;
transform: skewY(45deg) rotateX(-30deg);
}
      <div id="ace"
      >
        <div id="bace"
        >
         
        </div>
      </div>

I use the exact opposite transformations and it still doesn't return to default.

css html
1 Answers

As Ouroborus notes in his comment, undo the transforms in the reverse order in which they were applied. Also, add transform-style: preserve-3d to your outer div, since you are doing transforms in three-dimensional space.

Because your transforms are three-dimensional, part of your inner div will be behind the outer div. In the demo below, I made the outer div translucent to help show that.

#ace {
  width: 50vw;
  height: 50vw;
  background: #0f0a;
  transform-style: preserve-3d;
  transform: skewY(-45deg) rotateX(30deg);
}

#bace {
  width: 50%;
  height: 50%;
  background: black;
  transform: rotateX(-30deg) skewY(45deg);
}
<div id="ace">
  <div id="bace">
  </div>
</div>

user_34692730
Related