I am facing an issue with two div elements: a parent element that is rotated and a child element that I want to remain unaffected by the rotation of its parent.
To tackle this problem, I tried rotating the child element in the opposite direction of the parent. This method worked in some scenarios, such as when I applied the following CSS...
.parent {
transform: rotate(30deg);
}
.child {
transform: rotate(-30deg);
}
...resulting in the child element appearing straight and undistorted. However, when using rotateX instead...
.parent {
transform: rotateX(30deg);
}
.child {
transform: rotateX(-30deg);
}
...the child element still appears distorted.
In the actual code, both rotateX and rotateZ are used to create an isometric effect on the parent element. Here is the current implementation:
.happy_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(30deg);
}
.happy_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotate(-30deg);
}
.sad_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotateX(-60deg) rotateZ(45deg);
}
.sad_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotateX(60deg) rotateZ(45deg);
}<div class="happy_parent">
<div class="happy_child"></div>
</div>
<div class="sad_parent">
<div class="sad_child"></div>
</div>While the upper divs display correctly, the lower child-div remains distorted. What could be causing this issue?