Issue
#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.
Solution
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>
Answered By - mfluehr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.