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)