CSS Transform/Detransform

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

Blog

CSS Transform/Detransform

Kai Oswald

Join Our Newsletter. No Spam, Only the good stuff.

Related