When you only want the transform on the parent element you'll want to apply the negative transform on the child.
This is especially useful for skew and rotate.
.container {
transform: skewX(15deg)
}
.container > * {
transform: skewX(-15deg);
}
<div class="container">
<div class="content">
This content is not transformed
</div>
</div>
Now with CSS variables. This uses calc() to negate the value.
:root {
--value: 15deg;
}
.container {
transform: skewX(var(--value))
}
.container > * {
transform: skewX(calc(-1 * var(--value)));
}
Adding media-queries to handle different screen sizes with different values (rotating an element can make it really big depending on its width).
:root {
--value: 15deg;
}
@media screen and (min-width: 1440px) {
:root {
--value: 5deg;
}
}
.container {
transform: skewX(var(--value))
}
.container > * {
transform: skewX(calc(-1 * var(--value)));
}
Another example using SkewY on a full-width container
Top comments (0)