30-seconds-of-code/snippets/transform-detransform.md

title, tags

title	tags
Transform - Detransform	visual,beginner

Sets a transform on the parent element and de-transforms the child elements, so they are not affected by the transform. This allows for some neat effects such as skewed buttons.

<div class="parent"><div class="child">Child content</div></div>

:root {
  --transform: 10deg;
}

.parent {
  transform: skewX(var(--transform));
  padding: 1rem;
  border: 1px solid;
  display: inline-block;
}

.child {
  transform: skewX(calc(-1 * var(--transform)));
}

Explanation

• --transform: 10deg sets a CSS variable we can later use to prevent duplicate code.
• calc(-1 * var(--transform)) on the child element negates the transform from the parent.

Note: the display property of the child element may not be inline, otherwise the transform will be ignored - (see also).

Browser support

• https://caniuse.com/#feat=transforms2d