30 seconds of CSS

  Back to Home

Transform - Detransform  visualbeginner

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.

HTML
<div class="parent"><div class="child">Child content</div></div>
CSS
:root {
  --transform: 10deg;
}

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

.child {
  transform: skewX(calc(-1 * var(--transform)));
}
Demo
Child content
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

100.0%

⚠️ Requires prefix for full support.