From 9083212f75affe1dc6c4d12b123ad8425b1cc7a4 Mon Sep 17 00:00:00 2001
From: Kai Oswald <kaos1910@gmail.com>
Date: Thu, 17 Oct 2019 22:37:32 +0200
Subject: [PATCH] [FEATURE] Add snippet for transform/detransform (#160)

---
 snippets/transform-detransform.md | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 snippets/transform-detransform.md

diff --git a/snippets/transform-detransform.md b/snippets/transform-detransform.md
new file mode 100644
index 000000000..4273d13df
--- /dev/null
+++ b/snippets/transform-detransform.md
@@ -0,0 +1,41 @@
+---
+title: Transform - Detransform
+tags: 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.
+
+```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)));
+}
+```
+
+#### 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](https://drafts.csswg.org/css-transforms-1/#terminology)).
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
+
+- https://caniuse.com/#feat=transforms2d