3D transform utilities (#13248)

* 3D rotation utilities

* Validate rotate values

* Replace forEach with for loop

* transform-style, transform-box, and backface-visibility utilities

* Tests for transform utilities

* 'perspective' utility

* Fix tests

* Remove unnecessary suggestion; move function comments

* scale-z

* Fix Intellisense test

* perspective-origin

* scale-3d

* Only include the z component of scale if it's defined

We want to avoid triggerring unnecessary 3D transformations.

* Comment the reason for setting --tw-rotate

* Test full bare rotate

* Fix merge

* Comment on rotate arbitrary value

* perspective bare values

Support `perspective-123` (but not `perspective-potato`)

* scale-3d as a static modifier to scale

Instead of scale-3d taking a separate scale, it modifies scale to apply in three dimensions.

* Test that scale-x overrides scale

* scale arbitrary values

Support arbitrary value for scale (e.g. `scale-[1_2_3.5]`).

* Specify rotation axis using a modifier

Support single rotation angles in line with the [CSS `rotate` property](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate). Using modifiers (e.g. `rotate-45/x`) makes it clearer that the axis of rotation is modified. Thanks @adamwathan for this suggestion.

Composing angles is only supported in CSS via a pipeline of `transform` functions. I'll add arbitrary value support to `transform` next as an escape hatch for those cases that need more complex transformations.

* Use property defaults for scale-3d

* `transform` arbitrary values

Support arbitrary values for `transform`. The `skew-x` and `skew-y` transforms are applied before any arbitrary transformations.

* Add translate-z and translate-3d

Both work the same way as scale-z and scale-3d.

* Add translate-[xyz]-px

* Comment on how skewX and skewY are applied

* Remove unnecessary suggest

* Simplify translate

* Fix up comment on rotate syntax

* Back to rotate-x and rotate-y rather than rotate modifiers

* 3D transform test fixes

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -393,6 +393,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --line-height-8: 2rem;
     --line-height-9: 2.25rem;
     --line-height-10: 2.5rem;
+    --perspective-dramatic: 100px;
+    --perspective-near: 300px;
+    --perspective-normal: 500px;
+    --perspective-midrange: 800px;
+    --perspective-distant: 1200px;
     --transition-timing-function-linear: linear;
     --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
     --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -392,6 +392,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --line-height-8: 2rem;
   --line-height-9: 2.25rem;
   --line-height-10: 2.5rem;
+  --perspective-dramatic: 100px;
+  --perspective-near: 300px;
+  --perspective-normal: 500px;
+  --perspective-midrange: 800px;
+  --perspective-distant: 1200px;
   --transition-timing-function-linear: linear;
   --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
   --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -91,6 +91,24 @@ exports[`getClassList 1`] = `
   "-rotate-45",
   "-rotate-6",
   "-rotate-90",
+  "-rotate-x-0",
+  "-rotate-x-1",
+  "-rotate-x-12",
+  "-rotate-x-180",
+  "-rotate-x-2",
+  "-rotate-x-3",
+  "-rotate-x-45",
+  "-rotate-x-6",
+  "-rotate-x-90",
+  "-rotate-y-0",
+  "-rotate-y-1",
+  "-rotate-y-12",
+  "-rotate-y-180",
+  "-rotate-y-2",
+  "-rotate-y-3",
+  "-rotate-y-45",
+  "-rotate-y-6",
+  "-rotate-y-90",
   "-scale-0",
   "-scale-100",
   "-scale-105",
@@ -124,6 +142,17 @@ exports[`getClassList 1`] = `
   "-scale-y-75",
   "-scale-y-90",
   "-scale-y-95",
+  "-scale-z-0",
+  "-scale-z-100",
+  "-scale-z-105",
+  "-scale-z-110",
+  "-scale-z-125",
+  "-scale-z-150",
+  "-scale-z-200",
+  "-scale-z-50",
+  "-scale-z-75",
+  "-scale-z-90",
+  "-scale-z-95",
   "-scroll-m-0.5",
   "-scroll-m-1",
   "-scroll-m-3",
@@ -242,6 +271,10 @@ exports[`getClassList 1`] = `
   "-translate-y-1",
   "-translate-y-3",
   "-translate-y-4",
+  "-translate-z-0.5",
+  "-translate-z-1",
+  "-translate-z-3",
+  "-translate-z-4",
   "-underline-offset-0",
   "-underline-offset-1",
   "-underline-offset-2",
@@ -347,6 +380,8 @@ exports[`getClassList 1`] = `
   "backdrop-sepia-0",
   "backdrop-sepia-100",
   "backdrop-sepia-50",
+  "backface-hidden",
+  "backface-visible",
   "basis-0.5",
   "basis-1",
   "basis-3",
@@ -1180,6 +1215,18 @@ exports[`getClassList 1`] = `
   "pe-1",
   "pe-3",
   "pe-4",
+  "perspective-dramatic",
+  "perspective-none",
+  "perspective-normal",
+  "perspective-origin-bottom",
+  "perspective-origin-bottom-left",
+  "perspective-origin-bottom-right",
+  "perspective-origin-center",
+  "perspective-origin-left",
+  "perspective-origin-right",
+  "perspective-origin-top",
+  "perspective-origin-top-left",
+  "perspective-origin-top-right",
   "pl-0.5",
   "pl-1",
   "pl-3",
@@ -1266,6 +1313,24 @@ exports[`getClassList 1`] = `
   "rotate-45",
   "rotate-6",
   "rotate-90",
+  "rotate-x-0",
+  "rotate-x-1",
+  "rotate-x-12",
+  "rotate-x-180",
+  "rotate-x-2",
+  "rotate-x-3",
+  "rotate-x-45",
+  "rotate-x-6",
+  "rotate-x-90",
+  "rotate-y-0",
+  "rotate-y-1",
+  "rotate-y-12",
+  "rotate-y-180",
+  "rotate-y-2",
+  "rotate-y-3",
+  "rotate-y-45",
+  "rotate-y-6",
+  "rotate-y-90",
   "rounded-b-full",
   "rounded-b-none",
   "rounded-bl-full",
@@ -1350,6 +1415,7 @@ exports[`getClassList 1`] = `
   "scale-125",
   "scale-150",
   "scale-200",
+  "scale-3d",
   "scale-50",
   "scale-75",
   "scale-90",
@@ -1376,6 +1442,17 @@ exports[`getClassList 1`] = `
   "scale-y-75",
   "scale-y-90",
   "scale-y-95",
+  "scale-z-0",
+  "scale-z-100",
+  "scale-z-105",
+  "scale-z-110",
+  "scale-z-125",
+  "scale-z-150",
+  "scale-z-200",
+  "scale-z-50",
+  "scale-z-75",
+  "scale-z-90",
+  "scale-z-95",
   "scroll-auto",
   "scroll-m-0.5",
   "scroll-m-1",
@@ -1608,9 +1685,16 @@ exports[`getClassList 1`] = `
   "touch-pan-y",
   "touch-pinch-zoom",
   "transform",
+  "transform-3d",
+  "transform-border",
+  "transform-content",
   "transform-cpu",
+  "transform-fill",
+  "transform-flat",
   "transform-gpu",
   "transform-none",
+  "transform-stroke",
+  "transform-view",
   "transition",
   "transition-all",
   "transition-colors",
@@ -1621,18 +1705,27 @@ exports[`getClassList 1`] = `
   "translate-0.5",
   "translate-1",
   "translate-3",
+  "translate-3d",
   "translate-4",
   "translate-full",
   "translate-x-0.5",
   "translate-x-1",
   "translate-x-3",
   "translate-x-4",
   "translate-x-full",
+  "translate-x-px",
   "translate-y-0.5",
   "translate-y-1",
   "translate-y-3",
   "translate-y-4",
   "translate-y-full",
+  "translate-y-px",
+  "translate-z-0.5",
+  "translate-z-1",
+  "translate-z-3",
+  "translate-z-4",
+  "translate-z-full",
+  "translate-z-px",
   "truncate",
   "underline",
   "underline-offset-0",

packages/tailwindcss/src/index.test.ts

@@ -227,6 +227,12 @@ describe('@apply', () => {
         syntax: "<length-percentage>";
         inherits: false;
         initial-value: 0;
+      }
+
+      @property --tw-translate-z {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
       }"
     `)
   })

packages/tailwindcss/src/intellisense.test.ts

@@ -14,6 +14,8 @@ function loadDesignSystem() {
   theme.add('--breakpoint-sm', '640px')
   theme.add('--font-size-xs', '0.75rem')
   theme.add('--font-size-xs--line-height', '1rem')
+  theme.add('--perspective-dramatic', '100px')
+  theme.add('--perspective-normal', '500px')
   return buildDesignSystem(theme)
 }
 

packages/tailwindcss/src/property-order.ts

@@ -74,9 +74,10 @@ export default [
   // '--tw-rotate',
   '--tw-skew-x',
   '--tw-skew-y',
+  '--tw-scale-x',
+  '--tw-scale-y',
+  '--tw-scale-z',
   'scale',
-  // '--tw-scale-x',
-  // '--tw-scale-y',
   'transform',
 
   'animation',

packages/tailwindcss/src/theme.ts

@@ -197,6 +197,8 @@ export type ThemeKey =
   | '--outline-offset'
   | '--padding'
   | '--placeholder-color'
+  | '--perspective'
+  | '--perspective-origin'
   | '--radius'
   | '--ring-color'
   | '--ring-offset-color'