DEV Community

loading...

CSS Transform/Detransform

Kai Oswald
.NET Core + Vue.js = 🔥
・1 min read

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

Discussion (0)