From 5f524d43ddfcd7a87516fa477f9823fd0c419efa Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Tue, 11 Apr 2023 03:20:12 -0700
Subject: [PATCH 1/8] Enable 3d transforms and more natural GPU-first
 acceleration

---
 src/corePlugins.js   | 121 +++++++++++++++++++++++++++++++++----------
 stubs/config.full.js |  28 ++++++++++
 2 files changed, 123 insertions(+), 26 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index e4d2ff279a30..720401aae295 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -437,13 +437,21 @@ export let variantPlugins = {
   },
 }
 
-let cssTransformValue = [
+let cssTransformValueCpu = [
   'translate(var(--tw-translate-x), var(--tw-translate-y))',
   'rotate(var(--tw-rotate))',
-  'skewX(var(--tw-skew-x))',
-  'skewY(var(--tw-skew-y))',
-  'scaleX(var(--tw-scale-x))',
-  'scaleY(var(--tw-scale-y))',
+  'skew(var(--tw-skew-x), var(--tw-skew-y))',
+  'scale(var(--tw-scale-x), var(--tw-scale-y))',
+].join(' ')
+
+let cssTransformValueGpu = [
+  'perspective(var(--tw-perspective))',
+  'translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
+  'rotateX(var(--tw-rotate-x))',
+  'rotateY(var(--tw-rotate-y))',
+  'rotateZ(var(--tw-rotate))',
+  'skew(var(--tw-skew-x), var(--tw-skew-y))',
+  'scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z)',
 ].join(' ')
 
 let cssFilterValue = [
@@ -829,33 +837,72 @@ export let corePlugins = {
   },
 
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
+  perspectiveOrigin: createUtilityPlugin('perspectiveOrigin', [
+    ['perspective-origin', ['perspectiveOrigin']],
+  ]),
+  perspective: createUtilityPlugin('perspective', [['perspective', ['perspective']]]),
+  perspectiveSelf: createUtilityPlugin('perspective-self', [
+    [
+      'perspective-self',
+      [['@defaults transform', {}], '--tw-perspective', ['perspective', ['perspective']]],
+    ],
+  ]),
   translate: createUtilityPlugin(
     'translate',
     [
       [
-        [
-          'translate-x',
-          [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
-        ],
-        [
-          'translate-y',
-          [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
-        ],
+        'translate-x',
+        [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValueGpu]],
+      ],
+      [
+        'translate-y',
+        [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValueGpu]],
+      ],
+      [
+        'translate-z',
+        [['@defaults transform', {}], '--tw-translate-z', ['transform', cssTransformValueGpu]],
       ],
     ],
     { supportsNegativeValues: true }
   ),
   rotate: createUtilityPlugin(
     'rotate',
-    [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]],
+    [
+      [
+        [
+          'rotate-x',
+          [['@defaults transform', {}], '--tw-rotate-x', ['transform', cssTransformValueGpu]],
+        ],
+        [
+          'rotate-y',
+          [['@defaults transform', {}], '--tw-rotate-y', ['transform', cssTransformValueGpu]],
+        ],
+        // rotate and rotate-z, below, perform the same rotation but both are
+        // supported for consistency and clarity when crearting 3d transformation
+        [
+          'rotate',
+          [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValueGpu]],
+        ],
+        [
+          'rotate-z',
+          [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValueGpu]],
+        ],
+      ],
+    ],
     { supportsNegativeValues: true }
   ),
   skew: createUtilityPlugin(
     'skew',
     [
       [
-        ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]],
-        ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]],
+        [
+          'skew-x',
+          [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValueGpu]],
+        ],
+        [
+          'skew-y',
+          [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValueGpu]],
+        ],
       ],
     ],
     { supportsNegativeValues: true }
@@ -869,17 +916,22 @@ export let corePlugins = {
           ['@defaults transform', {}],
           '--tw-scale-x',
           '--tw-scale-y',
-          ['transform', cssTransformValue],
+          '--tw-scale-z',
+          ['transform', cssTransformValueGpu],
         ],
       ],
       [
         [
           'scale-x',
-          [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]],
+          [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValueGpu]],
         ],
         [
           'scale-y',
-          [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]],
+          [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValueGpu]],
+        ],
+        [
+          'scale-z',
+          [['@defaults transform', {}], '--tw-scale-z', ['transform', cssTransformValueGpu]],
         ],
       ],
     ],
@@ -888,27 +940,44 @@ export let corePlugins = {
 
   transform: ({ addDefaults, addUtilities }) => {
     addDefaults('transform', {
+      '--tw-perspective': 'none',
       '--tw-translate-x': '0',
       '--tw-translate-y': '0',
-      '--tw-rotate': '0',
+      '--tw-translate-z': '0',
+      '--tw-rotate-x': '0',
+      '--tw-rotate-y': '0',
+      '--tw-rotate': '0', // used for rotate and rotate-z
       '--tw-skew-x': '0',
       '--tw-skew-y': '0',
       '--tw-scale-x': '1',
       '--tw-scale-y': '1',
+      '--tw-scale-z': '1',
     })
 
     addUtilities({
-      '.transform': { '@defaults transform': {}, transform: cssTransformValue },
+      '.transform': { '@defaults transform': {}, transform: cssTransformValueCpu },
       '.transform-cpu': {
-        transform: cssTransformValue,
+        transform: cssTransformValueCpu,
       },
       '.transform-gpu': {
-        transform: cssTransformValue.replace(
-          'translate(var(--tw-translate-x), var(--tw-translate-y))',
-          'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
-        ),
+        transform: cssTransformValueGpu,
       },
       '.transform-none': { transform: 'none' },
+
+      // transform-style
+      '.transform-flat': { 'transform-style': 'flat' },
+      '.transform-3d': { 'transform-style': 'preserve-3d' },
+
+      // transform-box
+      '.transform-content': { 'transform-box': 'content-box' },
+      '.transform-border': { 'transform-box': 'border-box' },
+      '.transform-fill': { 'transform-box': 'fill-box' },
+      '.transform-stroke': { 'transform-box': 'stroke-box' },
+      '.transform-view': { 'transform-box': 'view-box' },
+
+      // backface-visibility
+      '.backface-visible': { 'backface-visibility': 'visible' },
+      '.backface-hidden': { 'backface-visibility': 'hidden' },
     })
   },
 
diff --git a/stubs/config.full.js b/stubs/config.full.js
index 2dd01c6fd467..211772c2cc9d 100644
--- a/stubs/config.full.js
+++ b/stubs/config.full.js
@@ -886,6 +886,34 @@ module.exports = {
       left: 'left',
       'top-left': 'top left',
     },
+    perspectiveOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    perspective: {
+      none: 'none',
+      0: '0rem',
+      xs: '6.25rem', // 100px
+      sm: '18.75rem', // 300px
+      md: '31.25rem', // 500px
+      lg: '50rem', // 800px
+      xl: '75rem', // 1200px
+      '2xl': '106.25rem', // 1700px
+      '3xl': '143.75rem', // 2300px
+      '4xl': '187.5rem', // 3000px
+      '5xl': '237.5rem', // 3800px
+      '6xl': '300rem', // 4800px
+      '7xl': '375rem', // 6000px
+      '8xl': '468.75rem', // 7500px
+      '9xl': '625rem', // 10000px
+    },
     transitionDelay: {
       0: '0s',
       75: '75ms',

From dbfa2bab4e76bf9dbfd4d07967fb02db3475860c Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Tue, 11 Apr 2023 03:44:38 -0700
Subject: [PATCH 2/8] =?UTF-8?q?Correct=20casing=20`perspective-self`=20?=
 =?UTF-8?q?=E2=86=92=20`perspectiveSelf`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/corePlugins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 720401aae295..18fc5636ae7e 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -841,7 +841,7 @@ export let corePlugins = {
     ['perspective-origin', ['perspectiveOrigin']],
   ]),
   perspective: createUtilityPlugin('perspective', [['perspective', ['perspective']]]),
-  perspectiveSelf: createUtilityPlugin('perspective-self', [
+  perspectiveSelf: createUtilityPlugin('perspectiveSelf', [
     [
       'perspective-self',
       [['@defaults transform', {}], '--tw-perspective', ['perspective', ['perspective']]],

From 67e50b6e5c6dc4d3aba69dd5febd442160f8f5ba Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Tue, 11 Apr 2023 04:18:24 -0700
Subject: [PATCH 3/8] Add missing parenthesis

---
 src/corePlugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 18fc5636ae7e..08198cdc271d 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -451,7 +451,7 @@ let cssTransformValueGpu = [
   'rotateY(var(--tw-rotate-y))',
   'rotateZ(var(--tw-rotate))',
   'skew(var(--tw-skew-x), var(--tw-skew-y))',
-  'scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z)',
+  'scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z))',
 ].join(' ')
 
 let cssFilterValue = [
@@ -955,7 +955,7 @@ export let corePlugins = {
     })
 
     addUtilities({
-      '.transform': { '@defaults transform': {}, transform: cssTransformValueCpu },
+      '.transform': { '@defaults transform': {}, transform: cssTransformValueGpu },
       '.transform-cpu': {
         transform: cssTransformValueCpu,
       },

From a7e3e1b206435812627f855547d80f370683b948 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Tue, 11 Apr 2023 04:18:37 -0700
Subject: [PATCH 4/8] Update and validate tests

---
 tests/any-type.test.js                  |  98 +++++---
 tests/apply.test.js                     |  24 +-
 tests/arbitrary-values.oxide.test.css   | 146 +++++++-----
 tests/arbitrary-values.test.css         | 146 +++++++-----
 tests/basic-usage.oxide.test.css        |  92 +++++---
 tests/basic-usage.test.css              |  92 +++++---
 tests/kitchen-sink.test.js              |  52 +++--
 tests/oxide-svelte.test.css             |  10 +
 tests/raw-content.oxide.test.css        |  81 ++++---
 tests/raw-content.test.css              |  81 ++++---
 tests/resolve-defaults-at-rules.test.js | 288 ++++++++++++++++--------
 tests/source-maps.test.js               | 192 ++++++++--------
 tests/util/defaults.js                  |   5 +
 tests/variants.oxide.test.css           |   5 +
 tests/variants.test.css                 |   5 +
 15 files changed, 829 insertions(+), 488 deletions(-)

diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index 7b787396647c..e8f21f94da12 100644
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -309,40 +309,53 @@ crosscheck(({ stable, oxide }) => {
         }
         .translate-x-\[var\(--any-value\)\] {
           --tw-translate-x: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .translate-y-\[var\(--any-value\)\] {
           --tw-translate-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .rotate-\[var\(--any-value\)\] {
           --tw-rotate: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
           --tw-scale-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: var(--any-value);
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-x-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-y-\[var\(--any-value\)\] {
           --tw-scale-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .animate-\[var\(--any-value\)\] {
           animation: var(--any-value);
@@ -858,40 +871,53 @@ crosscheck(({ stable, oxide }) => {
         }
         .translate-x-\[var\(--any-value\)\] {
           --tw-translate-x: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .translate-y-\[var\(--any-value\)\] {
           --tw-translate-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .rotate-\[var\(--any-value\)\] {
           --tw-rotate: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
           --tw-scale-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: var(--any-value);
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-x-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-y-\[var\(--any-value\)\] {
           --tw-scale-y: var(--any-value);
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .animate-\[var\(--any-value\)\] {
           animation: var(--any-value);
diff --git a/tests/apply.test.js b/tests/apply.test.js
index e4af6ee58a77..9ce5b17933ca 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -1085,9 +1085,11 @@ crosscheck(({ stable, oxide }) => {
         .foo {
           --tw-translate-x: -50%;
           --tw-translate-y: -50%;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
           position: absolute;
           top: 50%;
           left: 50%;
@@ -1848,9 +1850,11 @@ crosscheck(({ stable, oxide }) => {
       return expect(result.css).toMatchFormattedCss(css`
         .foo:focus {
           --tw-rotate: 90deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -1876,9 +1880,11 @@ crosscheck(({ stable, oxide }) => {
         ${defaults}
         .foo:focus {
           --tw-rotate: 90deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index 214d086017ee..f6493c83f331 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -227,113 +227,151 @@
 }
 .translate-x-\[12\%\] {
   --tw-translate-x: 12%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-\[var\(--value\)\] {
   --tw-translate-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-\[12\%\] {
   --tw-translate-y: 12%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-\[var\(--value\)\] {
   --tw-translate-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[2\.3rad\] {
   --tw-rotate: 131.78deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-\[var\(--value\)\] {
   --tw-skew-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-\[var\(--value\)\] {
   --tw-skew-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-\[0\.7\] {
   --tw-scale-x: 0.7;
   --tw-scale-y: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: 0.7;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
   --tw-scale-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: var(--value);
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-x-\[0\.7\] {
   --tw-scale-x: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-x-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-y-\[0\.7\] {
   --tw-scale-y: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-y-\[var\(--value\)\] {
   --tw-scale-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .animate-\[pong_1s_cubic-bezier\(0\,0\,0\.2\,1\)_infinite\] {
   animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite pong;
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 6f43a5277cc6..d8504333a00d 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -227,113 +227,151 @@
 }
 .translate-x-\[12\%\] {
   --tw-translate-x: 12%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-\[var\(--value\)\] {
   --tw-translate-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-\[12\%\] {
   --tw-translate-y: 12%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-\[var\(--value\)\] {
   --tw-translate-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[2\.3rad\] {
   --tw-rotate: 131.78deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-\[var\(--value\)\] {
   --tw-skew-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-\[var\(--value\)\] {
   --tw-skew-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-\[0\.7\] {
   --tw-scale-x: 0.7;
   --tw-scale-y: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: 0.7;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
   --tw-scale-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: var(--value);
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-x-\[0\.7\] {
   --tw-scale-x: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-x-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-y-\[0\.7\] {
   --tw-scale-y: 0.7;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-y-\[var\(--value\)\] {
   --tw-scale-y: var(--value);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .animate-\[pong_1s_cubic-bezier\(0\,0\,0\.2\,1\)_infinite\] {
   animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite pong;
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index 6a01dc045efa..fcb9d2d0c4b5 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -4,13 +4,18 @@
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
@@ -282,68 +287,85 @@
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-3 {
   --tw-rotate: 3deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: 0.95;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-scale-x-100 {
   --tw-scale-x: -1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
+.transform,
 .transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .transform-none {
   transform: none;
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 720c783e91ab..0e31fba5b742 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -4,13 +4,18 @@
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
@@ -282,68 +287,85 @@
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-3 {
   --tw-rotate: 3deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  --tw-scale-z: 0.95;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-scale-x-100 {
   --tw-scale-x: -1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
+.transform,
 .transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .transform-none {
   transform: none;
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index 3b02c8966014..ae2cc71386bd 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -462,14 +462,19 @@ crosscheck(({ stable, oxide }) => {
         .scale-50 {
           --tw-scale-x: 0.5;
           --tw-scale-y: 0.5;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 0.5;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .transform {
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
           grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
@@ -672,9 +677,12 @@ crosscheck(({ stable, oxide }) => {
         .hover\:scale-75:hover {
           --tw-scale-x: 0.75;
           --tw-scale-y: 0.75;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 0.75;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .hover\:font-bold:hover {
           font-weight: 700;
@@ -1030,14 +1038,19 @@ crosscheck(({ stable, oxide }) => {
         .scale-50 {
           --tw-scale-x: 0.5;
           --tw-scale-y: 0.5;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 0.5;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .transform {
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
           grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
@@ -1232,9 +1245,12 @@ crosscheck(({ stable, oxide }) => {
         .hover\:scale-75:hover {
           --tw-scale-x: 0.75;
           --tw-scale-y: 0.75;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 0.75;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .hover\:font-bold:hover {
           font-weight: 700;
diff --git a/tests/oxide-svelte.test.css b/tests/oxide-svelte.test.css
index ef36fec7769b..f2f658d46d35 100644
--- a/tests/oxide-svelte.test.css
+++ b/tests/oxide-svelte.test.css
@@ -3,13 +3,18 @@
 ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
@@ -52,13 +57,18 @@
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
index aa5abd127083..44bb6a154052 100644
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -193,62 +193,77 @@
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-3 {
   --tw-rotate: 3deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
+  --tw-scale-z: 0.95;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
+}
+.transform,
 .transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .animate-none {
   animation: none;
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index dba9f3194292..064b1879d2be 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -193,62 +193,77 @@
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .rotate-3 {
   --tw-rotate: 3deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
+  --tw-scale-z: 0.95;
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
+}
+.transform,
 .transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
+  transform: perspective(var(--tw-perspective))
+    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+    skew(var(--tw-skew-x), var(--tw-skew-y))
+    scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
 }
 .animate-none {
   animation: none;
diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js
index 5c7e0738e7ba..22b75652a0aa 100644
--- a/tests/resolve-defaults-at-rules.test.js
+++ b/tests/resolve-defaults-at-rules.test.js
@@ -19,31 +19,42 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .rotate-3 {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .skew-y-6 {
           --tw-skew-y: 6deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .scale-x-110 {
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -69,31 +80,42 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .hover\:scale-x-110:hover {
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .focus\:rotate-3:focus {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .hover\:focus\:skew-y-6:focus:hover {
           --tw-skew-y: 6deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -117,27 +139,36 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .before\:scale-x-110:before {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .after\:rotate-3:after {
           content: var(--tw-content);
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -161,25 +192,34 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .group:hover .group-hover\:scale-x-110 {
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .peer:focus ~ .peer-focus\:rotate-3 {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -205,27 +245,36 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .group:hover .group-hover\:before\:scale-x-110:before {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .peer:focus ~ .peer-focus\:after\:rotate-3:after {
           content: var(--tw-content);
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -255,27 +304,36 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .group:hover .group-hover\:hover\:before\:scale-x-110:hover:before {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus:after {
           content: var(--tw-content);
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -341,75 +399,99 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .foo {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .bar:before {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
           --tw-scale-y: 1.1;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 1.1;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .baz:before {
           --tw-rotate: 45deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .whats ~ .next > span:hover {
           --tw-skew-x: 6deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         @media (min-width: 768px) {
           .media-queries {
             --tw-rotate: 45deg;
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-              rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-              scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+            transform: perspective(var(--tw-perspective))
+              translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+              rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+              skew(var(--tw-skew-x), var(--tw-skew-y))
+              scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
           }
         }
         .a,
         .b,
         .c {
           --tw-skew-y: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .a,
         .b {
           --tw-rotate: 45deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .a:before,
         .b:after {
           --tw-rotate: 90deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .recursive {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -450,37 +532,50 @@ crosscheck(() => {
         .b:after,
         .c:first-line,
         .d:first-letter {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
         .a:before {
           --tw-rotate: 45deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .b:after {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .c:first-line {
           --tw-rotate: 1deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .d:first-letter {
           --tw-rotate: 6deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -592,13 +687,18 @@ crosscheck(() => {
         :before,
         :after,
         ::backdrop {
+          --tw-perspective: none;
           --tw-translate-x: 0;
           --tw-translate-y: 0;
+          --tw-translate-z: 0;
+          --tw-rotate-x: 0;
+          --tw-rotate-y: 0;
           --tw-rotate: 0;
           --tw-skew-x: 0;
           --tw-skew-y: 0;
           --tw-scale-x: 1;
           --tw-scale-y: 1;
+          --tw-scale-z: 1;
         }
       `)
     })
@@ -620,9 +720,11 @@ crosscheck(() => {
       expect(result.css).toMatchFormattedCss(css`
         .rotate-3 {
           --tw-rotate: 3deg;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -733,9 +835,12 @@ crosscheck(() => {
         .scale-150 {
           --tw-scale-x: 1.5;
           --tw-scale-y: 1.5;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 1.5;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
@@ -764,9 +869,12 @@ crosscheck(() => {
         .my-card {
           --tw-scale-x: 1.5;
           --tw-scale-y: 1.5;
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-            rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          --tw-scale-z: 1.5;
+          transform: perspective(var(--tw-perspective))
+            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
+            skew(var(--tw-skew-x), var(--tw-skew-y))
+            scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
       `)
     })
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
index e0839bf6ef59..9071b3dbd9c7 100644
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -302,101 +302,111 @@ crosscheck(({ stable, oxide }) => {
       '2:6 -> 379:0',
       '2:6-20 -> 380:2-26',
       '2:6-20 -> 381:2-26',
-      '2:6-20 -> 382:2-21',
+      '2:6-20 -> 382:2-24',
       '2:6-20 -> 383:2-21',
-      '2:6-20 -> 384:2-16',
-      '2:6-20 -> 385:2-16',
-      '2:6-20 -> 386:2-16',
-      '2:6-20 -> 387:2-17',
-      '2:6-20 -> 388:2-17',
-      '2:6-20 -> 389:2-15',
-      '2:6-20 -> 390:2-15',
-      '2:6-20 -> 391:2-20',
-      '2:6-20 -> 392:2-40',
-      '2:6-20 -> 393:2-32',
-      '2:6-20 -> 394:2-31',
-      '2:6-20 -> 395:2-30',
-      '2:6-20 -> 396:2-17',
-      '2:6-20 -> 397:2-22',
-      '2:6-20 -> 398:2-24',
-      '2:6-20 -> 399:2-25',
-      '2:6-20 -> 400:2-26',
-      '2:6-20 -> 401:2-20',
-      '2:6-20 -> 402:2-29',
-      '2:6-20 -> 403:2-30',
-      '2:6-20 -> 404:2-40',
-      '2:6-20 -> 405:2-36',
-      '2:6-20 -> 406:2-29',
-      '2:6-20 -> 407:2-24',
-      '2:6-20 -> 408:2-32',
-      '2:6-20 -> 409:2-14',
-      '2:6-20 -> 410:2-20',
-      '2:6-20 -> 411:2-18',
-      '2:6-20 -> 412:2-19',
-      '2:6-20 -> 413:2-20',
-      '2:6-20 -> 414:2-16',
-      '2:6-20 -> 415:2-18',
-      '2:6-20 -> 416:2-15',
-      '2:6-20 -> 417:2-21',
-      '2:6-20 -> 418:2-23',
-      '2:6-20 -> 419:2-29',
-      '2:6-20 -> 420:2-27',
-      '2:6-20 -> 421:2-28',
-      '2:6-20 -> 422:2-29',
-      '2:6-20 -> 423:2-25',
-      '2:6-20 -> 424:2-26',
+      '2:6-20 -> 384:2-21',
+      '2:6-20 -> 385:2-21',
+      '2:6-20 -> 386:2-18',
+      '2:6-20 -> 387:2-18',
+      '2:6-20 -> 388:2-16',
+      '2:6-20 -> 389:2-16',
+      '2:6-20 -> 390:2-16',
+      '2:6-20 -> 391:2-17',
+      '2:6-20 -> 392:2-17',
+      '2:6-20 -> 393:2-17',
+      '2:6-20 -> 394:2-15',
+      '2:6-20 -> 395:2-15',
+      '2:6-20 -> 396:2-20',
+      '2:6-20 -> 397:2-40',
+      '2:6-20 -> 398:2-32',
+      '2:6-20 -> 399:2-31',
+      '2:6-20 -> 400:2-30',
+      '2:6-20 -> 401:2-17',
+      '2:6-20 -> 402:2-22',
+      '2:6-20 -> 403:2-24',
+      '2:6-20 -> 404:2-25',
+      '2:6-20 -> 405:2-26',
+      '2:6-20 -> 406:2-20',
+      '2:6-20 -> 407:2-29',
+      '2:6-20 -> 408:2-30',
+      '2:6-20 -> 409:2-40',
+      '2:6-20 -> 410:2-36',
+      '2:6-20 -> 411:2-29',
+      '2:6-20 -> 412:2-24',
+      '2:6-20 -> 413:2-32',
+      '2:6-20 -> 414:2-14',
+      '2:6-20 -> 415:2-20',
+      '2:6-20 -> 416:2-18',
+      '2:6-20 -> 417:2-19',
+      '2:6-20 -> 418:2-20',
+      '2:6-20 -> 419:2-16',
+      '2:6-20 -> 420:2-18',
+      '2:6-20 -> 421:2-15',
+      '2:6-20 -> 422:2-21',
+      '2:6-20 -> 423:2-23',
+      '2:6-20 -> 424:2-29',
       '2:6-20 -> 425:2-27',
-      '2:6 -> 426:2',
-      '2:20 -> 427:0',
-      '2:6 -> 429:0',
-      '2:6-20 -> 430:2-26',
-      '2:6-20 -> 431:2-26',
-      '2:6-20 -> 432:2-21',
-      '2:6-20 -> 433:2-21',
-      '2:6-20 -> 434:2-16',
-      '2:6-20 -> 435:2-16',
-      '2:6-20 -> 436:2-16',
-      '2:6-20 -> 437:2-17',
-      '2:6-20 -> 438:2-17',
-      '2:6-20 -> 439:2-15',
-      '2:6-20 -> 440:2-15',
-      '2:6-20 -> 441:2-20',
-      '2:6-20 -> 442:2-40',
-      '2:6-20 -> 443:2-32',
-      '2:6-20 -> 444:2-31',
-      '2:6-20 -> 445:2-30',
+      '2:6-20 -> 426:2-28',
+      '2:6-20 -> 427:2-29',
+      '2:6-20 -> 428:2-25',
+      '2:6-20 -> 429:2-26',
+      '2:6-20 -> 430:2-27',
+      '2:6 -> 431:2',
+      '2:20 -> 432:0',
+      '2:6 -> 434:0',
+      '2:6-20 -> 435:2-26',
+      '2:6-20 -> 436:2-26',
+      '2:6-20 -> 437:2-24',
+      '2:6-20 -> 438:2-21',
+      '2:6-20 -> 439:2-21',
+      '2:6-20 -> 440:2-21',
+      '2:6-20 -> 441:2-18',
+      '2:6-20 -> 442:2-18',
+      '2:6-20 -> 443:2-16',
+      '2:6-20 -> 444:2-16',
+      '2:6-20 -> 445:2-16',
       '2:6-20 -> 446:2-17',
-      '2:6-20 -> 447:2-22',
-      '2:6-20 -> 448:2-24',
-      '2:6-20 -> 449:2-25',
-      '2:6-20 -> 450:2-26',
+      '2:6-20 -> 447:2-17',
+      '2:6-20 -> 448:2-17',
+      '2:6-20 -> 449:2-15',
+      '2:6-20 -> 450:2-15',
       '2:6-20 -> 451:2-20',
-      '2:6-20 -> 452:2-29',
-      '2:6-20 -> 453:2-30',
-      '2:6-20 -> 454:2-40',
-      '2:6-20 -> 455:2-36',
-      '2:6-20 -> 456:2-29',
-      '2:6-20 -> 457:2-24',
-      '2:6-20 -> 458:2-32',
-      '2:6-20 -> 459:2-14',
-      '2:6-20 -> 460:2-20',
-      '2:6-20 -> 461:2-18',
-      '2:6-20 -> 462:2-19',
-      '2:6-20 -> 463:2-20',
-      '2:6-20 -> 464:2-16',
-      '2:6-20 -> 465:2-18',
-      '2:6-20 -> 466:2-15',
-      '2:6-20 -> 467:2-21',
-      '2:6-20 -> 468:2-23',
-      '2:6-20 -> 469:2-29',
-      '2:6-20 -> 470:2-27',
-      '2:6-20 -> 471:2-28',
-      '2:6-20 -> 472:2-29',
-      '2:6-20 -> 473:2-25',
-      '2:6-20 -> 474:2-26',
-      '2:6-20 -> 475:2-27',
-      '2:6 -> 476:2',
-      '2:20 -> 477:0',
+      '2:6-20 -> 452:2-40',
+      '2:6-20 -> 453:2-32',
+      '2:6-20 -> 454:2-31',
+      '2:6-20 -> 455:2-30',
+      '2:6-20 -> 456:2-17',
+      '2:6-20 -> 457:2-22',
+      '2:6-20 -> 458:2-24',
+      '2:6-20 -> 459:2-25',
+      '2:6-20 -> 460:2-26',
+      '2:6-20 -> 461:2-20',
+      '2:6-20 -> 462:2-29',
+      '2:6-20 -> 463:2-30',
+      '2:6-20 -> 464:2-40',
+      '2:6-20 -> 465:2-36',
+      '2:6-20 -> 466:2-29',
+      '2:6-20 -> 467:2-24',
+      '2:6-20 -> 468:2-32',
+      '2:6-20 -> 469:2-14',
+      '2:6-20 -> 470:2-20',
+      '2:6-20 -> 471:2-18',
+      '2:6-20 -> 472:2-19',
+      '2:6-20 -> 473:2-20',
+      '2:6-20 -> 474:2-16',
+      '2:6-20 -> 475:2-18',
+      '2:6-20 -> 476:2-15',
+      '2:6-20 -> 477:2-21',
+      '2:6-20 -> 478:2-23',
+      '2:6-20 -> 479:2-29',
+      '2:6-20 -> 480:2-27',
+      '2:6-20 -> 481:2-28',
+      '2:6-20 -> 482:2-29',
+      '2:6-20 -> 483:2-25',
+      '2:6-20 -> 484:2-26',
+      '2:6-20 -> 485:2-27',
+      '2:6 -> 486:2',
+      '2:20 -> 487:0',
     ])
   })
 
diff --git a/tests/util/defaults.js b/tests/util/defaults.js
index bea97d338154..66f387a7322a 100644
--- a/tests/util/defaults.js
+++ b/tests/util/defaults.js
@@ -13,13 +13,18 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
     ::backdrop {
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
+      --tw-perspective: none;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: 0;
+      --tw-rotate-y: 0;
       --tw-rotate: 0;
       --tw-skew-x: 0;
       --tw-skew-y: 0;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-pan-x: ;
       --tw-pan-y: ;
       --tw-pinch-zoom: ;
diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css
index 5e06f3942492..6ae4ab1800e9 100644
--- a/tests/variants.oxide.test.css
+++ b/tests/variants.oxide.test.css
@@ -4,13 +4,18 @@
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 8a9d481ee7bc..ed97d3bdc41c 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -4,13 +4,18 @@
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
+  --tw-perspective: none;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
+  --tw-translate-z: 0;
+  --tw-rotate-x: 0;
+  --tw-rotate-y: 0;
   --tw-rotate: 0;
   --tw-skew-x: 0;
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
+  --tw-scale-z: 1;
   --tw-pan-x: ;
   --tw-pan-y: ;
   --tw-pinch-zoom: ;

From c714b6340168f958a1474b970d68cdb988d2f49a Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Sun, 16 Apr 2023 17:09:51 -0700
Subject: [PATCH 5/8] Resolve `translate3d ` typo, replace perspective scale
 with quadratic

---
 src/corePlugins.js   |  2 +-
 stubs/config.full.js | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 08198cdc271d..0109ae5fc531 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -446,7 +446,7 @@ let cssTransformValueCpu = [
 
 let cssTransformValueGpu = [
   'perspective(var(--tw-perspective))',
-  'translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
+  'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
   'rotateX(var(--tw-rotate-x))',
   'rotateY(var(--tw-rotate-y))',
   'rotateZ(var(--tw-rotate))',
diff --git a/stubs/config.full.js b/stubs/config.full.js
index 211772c2cc9d..af2c4b4da426 100644
--- a/stubs/config.full.js
+++ b/stubs/config.full.js
@@ -901,18 +901,18 @@ module.exports = {
       none: 'none',
       0: '0rem',
       xs: '6.25rem', // 100px
-      sm: '18.75rem', // 300px
+      sm: '15.625rem', // 250px
       md: '31.25rem', // 500px
-      lg: '50rem', // 800px
-      xl: '75rem', // 1200px
-      '2xl': '106.25rem', // 1700px
-      '3xl': '143.75rem', // 2300px
-      '4xl': '187.5rem', // 3000px
-      '5xl': '237.5rem', // 3800px
-      '6xl': '300rem', // 4800px
-      '7xl': '375rem', // 6000px
-      '8xl': '468.75rem', // 7500px
-      '9xl': '625rem', // 10000px
+      lg: '56.25rem', // 900px
+      xl: '90.625rem', // 1450px
+      '2xl': '137.5rem', // 2200px
+      '3xl': '196.875rem', // 3150px
+      '4xl': '268.75rem', // 4300px
+      '5xl': '353.125rem', // 5650px
+      '6xl': '450rem', // 7200px
+      '7xl': '559.375rem', // 8950px
+      '8xl': '681.25rem', // 10900px
+      '9xl': '815.625rem', // 13050px
     },
     transitionDelay: {
       0: '0s',

From fa8fa50c44d94657a3b7aa3b725f96373b7789f7 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Sun, 16 Apr 2023 17:10:21 -0700
Subject: [PATCH 6/8] Rotate before translating

---
 src/corePlugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 0109ae5fc531..1a9d6bd260ec 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -438,18 +438,18 @@ export let variantPlugins = {
 }
 
 let cssTransformValueCpu = [
-  'translate(var(--tw-translate-x), var(--tw-translate-y))',
   'rotate(var(--tw-rotate))',
+  'translate(var(--tw-translate-x), var(--tw-translate-y))',
   'skew(var(--tw-skew-x), var(--tw-skew-y))',
   'scale(var(--tw-scale-x), var(--tw-scale-y))',
 ].join(' ')
 
 let cssTransformValueGpu = [
   'perspective(var(--tw-perspective))',
-  'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
   'rotateX(var(--tw-rotate-x))',
   'rotateY(var(--tw-rotate-y))',
   'rotateZ(var(--tw-rotate))',
+  'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
   'skew(var(--tw-skew-x), var(--tw-skew-y))',
   'scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z))',
 ].join(' ')

From 4d30ba7761348ff57f9565055d50ecdd7e5acce2 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Sun, 16 Apr 2023 17:10:21 -0700
Subject: [PATCH 7/8] Revert "Rotate before translating"

This reverts commit 39de8666359d5cbb6422c15570effae202967e9b.
---
 src/corePlugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 1a9d6bd260ec..0109ae5fc531 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -438,18 +438,18 @@ export let variantPlugins = {
 }
 
 let cssTransformValueCpu = [
-  'rotate(var(--tw-rotate))',
   'translate(var(--tw-translate-x), var(--tw-translate-y))',
+  'rotate(var(--tw-rotate))',
   'skew(var(--tw-skew-x), var(--tw-skew-y))',
   'scale(var(--tw-scale-x), var(--tw-scale-y))',
 ].join(' ')
 
 let cssTransformValueGpu = [
   'perspective(var(--tw-perspective))',
+  'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
   'rotateX(var(--tw-rotate-x))',
   'rotateY(var(--tw-rotate-y))',
   'rotateZ(var(--tw-rotate))',
-  'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))',
   'skew(var(--tw-skew-x), var(--tw-skew-y))',
   'scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z))',
 ].join(' ')

From 7c6cc6b48377dab0408f12276f44bacac6afee29 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Mon, 17 Apr 2023 10:03:02 -0700
Subject: [PATCH 8/8] Resolve `translate3d ` typo in tests

---
 tests/any-type.test.js                  | 24 +++++-----
 tests/apply.test.js                     |  6 +--
 tests/arbitrary-values.oxide.test.css   | 36 +++++++--------
 tests/arbitrary-values.test.css         | 36 +++++++--------
 tests/basic-usage.oxide.test.css        | 20 ++++-----
 tests/basic-usage.test.css              | 20 ++++-----
 tests/kitchen-sink.test.js              | 12 ++---
 tests/raw-content.oxide.test.css        | 18 ++++----
 tests/raw-content.test.css              | 18 ++++----
 tests/resolve-defaults-at-rules.test.js | 60 ++++++++++++-------------
 10 files changed, 125 insertions(+), 125 deletions(-)

diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index e8f21f94da12..bcf6ab4ce030 100644
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -310,7 +310,7 @@ crosscheck(({ stable, oxide }) => {
         .translate-x-\[var\(--any-value\)\] {
           --tw-translate-x: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -318,7 +318,7 @@ crosscheck(({ stable, oxide }) => {
         .translate-y-\[var\(--any-value\)\] {
           --tw-translate-y: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -326,7 +326,7 @@ crosscheck(({ stable, oxide }) => {
         .rotate-\[var\(--any-value\)\] {
           --tw-rotate: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -336,7 +336,7 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: var(--any-value);
           --tw-scale-z: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -344,7 +344,7 @@ crosscheck(({ stable, oxide }) => {
         .scale-x-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -352,7 +352,7 @@ crosscheck(({ stable, oxide }) => {
         .scale-y-\[var\(--any-value\)\] {
           --tw-scale-y: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -872,7 +872,7 @@ crosscheck(({ stable, oxide }) => {
         .translate-x-\[var\(--any-value\)\] {
           --tw-translate-x: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -880,7 +880,7 @@ crosscheck(({ stable, oxide }) => {
         .translate-y-\[var\(--any-value\)\] {
           --tw-translate-y: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -888,7 +888,7 @@ crosscheck(({ stable, oxide }) => {
         .rotate-\[var\(--any-value\)\] {
           --tw-rotate: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -898,7 +898,7 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: var(--any-value);
           --tw-scale-z: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -906,7 +906,7 @@ crosscheck(({ stable, oxide }) => {
         .scale-x-\[var\(--any-value\)\] {
           --tw-scale-x: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -914,7 +914,7 @@ crosscheck(({ stable, oxide }) => {
         .scale-y-\[var\(--any-value\)\] {
           --tw-scale-y: var(--any-value);
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 9ce5b17933ca..1d8145a0c523 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -1086,7 +1086,7 @@ crosscheck(({ stable, oxide }) => {
           --tw-translate-x: -50%;
           --tw-translate-y: -50%;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -1851,7 +1851,7 @@ crosscheck(({ stable, oxide }) => {
         .foo:focus {
           --tw-rotate: 90deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -1881,7 +1881,7 @@ crosscheck(({ stable, oxide }) => {
         .foo:focus {
           --tw-rotate: 90deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index f6493c83f331..de46f27a1b92 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -228,7 +228,7 @@
 .translate-x-\[12\%\] {
   --tw-translate-x: 12%;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -236,7 +236,7 @@
 .translate-x-\[var\(--value\)\] {
   --tw-translate-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -244,7 +244,7 @@
 .translate-y-\[12\%\] {
   --tw-translate-y: 12%;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -252,7 +252,7 @@
 .translate-y-\[var\(--value\)\] {
   --tw-translate-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -260,7 +260,7 @@
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -268,7 +268,7 @@
 .rotate-\[2\.3rad\] {
   --tw-rotate: 131.78deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -276,7 +276,7 @@
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -284,7 +284,7 @@
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -292,7 +292,7 @@
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -300,7 +300,7 @@
 .skew-x-\[var\(--value\)\] {
   --tw-skew-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -308,7 +308,7 @@
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -316,7 +316,7 @@
 .skew-y-\[var\(--value\)\] {
   --tw-skew-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -326,7 +326,7 @@
   --tw-scale-y: 0.7;
   --tw-scale-z: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -336,7 +336,7 @@
   --tw-scale-y: var(--value);
   --tw-scale-z: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -344,7 +344,7 @@
 .scale-x-\[0\.7\] {
   --tw-scale-x: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -352,7 +352,7 @@
 .scale-x-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -360,7 +360,7 @@
 .scale-y-\[0\.7\] {
   --tw-scale-y: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -368,7 +368,7 @@
 .scale-y-\[var\(--value\)\] {
   --tw-scale-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index d8504333a00d..99442d2f3b35 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -228,7 +228,7 @@
 .translate-x-\[12\%\] {
   --tw-translate-x: 12%;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -236,7 +236,7 @@
 .translate-x-\[var\(--value\)\] {
   --tw-translate-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -244,7 +244,7 @@
 .translate-y-\[12\%\] {
   --tw-translate-y: 12%;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -252,7 +252,7 @@
 .translate-y-\[var\(--value\)\] {
   --tw-translate-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -260,7 +260,7 @@
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -268,7 +268,7 @@
 .rotate-\[2\.3rad\] {
   --tw-rotate: 131.78deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -276,7 +276,7 @@
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -284,7 +284,7 @@
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -292,7 +292,7 @@
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -300,7 +300,7 @@
 .skew-x-\[var\(--value\)\] {
   --tw-skew-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -308,7 +308,7 @@
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -316,7 +316,7 @@
 .skew-y-\[var\(--value\)\] {
   --tw-skew-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -326,7 +326,7 @@
   --tw-scale-y: 0.7;
   --tw-scale-z: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -336,7 +336,7 @@
   --tw-scale-y: var(--value);
   --tw-scale-z: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -344,7 +344,7 @@
 .scale-x-\[0\.7\] {
   --tw-scale-x: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -352,7 +352,7 @@
 .scale-x-\[var\(--value\)\] {
   --tw-scale-x: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -360,7 +360,7 @@
 .scale-y-\[0\.7\] {
   --tw-scale-y: 0.7;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -368,7 +368,7 @@
 .scale-y-\[var\(--value\)\] {
   --tw-scale-y: var(--value);
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index fcb9d2d0c4b5..9e6afbec3d56 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -288,7 +288,7 @@
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -296,7 +296,7 @@
 .-translate-x-4 {
   --tw-translate-x: -1rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -304,7 +304,7 @@
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -312,7 +312,7 @@
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -320,7 +320,7 @@
 .rotate-3 {
   --tw-rotate: 3deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -328,7 +328,7 @@
 .skew-x-12 {
   --tw-skew-x: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -336,7 +336,7 @@
 .skew-y-12 {
   --tw-skew-y: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -346,7 +346,7 @@
   --tw-scale-y: 0.95;
   --tw-scale-z: 0.95;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -354,7 +354,7 @@
 .-scale-x-100 {
   --tw-scale-x: -1;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -362,7 +362,7 @@
 .transform,
 .transform-gpu {
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 0e31fba5b742..b03e9c11e9e8 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -288,7 +288,7 @@
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -296,7 +296,7 @@
 .-translate-x-4 {
   --tw-translate-x: -1rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -304,7 +304,7 @@
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -312,7 +312,7 @@
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -320,7 +320,7 @@
 .rotate-3 {
   --tw-rotate: 3deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -328,7 +328,7 @@
 .skew-x-12 {
   --tw-skew-x: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -336,7 +336,7 @@
 .skew-y-12 {
   --tw-skew-y: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -346,7 +346,7 @@
   --tw-scale-y: 0.95;
   --tw-scale-z: 0.95;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -354,7 +354,7 @@
 .-scale-x-100 {
   --tw-scale-x: -1;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -362,7 +362,7 @@
 .transform,
 .transform-gpu {
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index ae2cc71386bd..db5fdefa2391 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -464,14 +464,14 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: 0.5;
           --tw-scale-z: 0.5;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .transform {
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -679,7 +679,7 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: 0.75;
           --tw-scale-z: 0.75;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -1040,14 +1040,14 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: 0.5;
           --tw-scale-z: 0.5;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
         }
         .transform {
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -1247,7 +1247,7 @@ crosscheck(({ stable, oxide }) => {
           --tw-scale-y: 0.75;
           --tw-scale-z: 0.75;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
index 44bb6a154052..750e0efffa0e 100644
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -194,7 +194,7 @@
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -202,7 +202,7 @@
 .-translate-x-4 {
   --tw-translate-x: -1rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -210,7 +210,7 @@
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -218,7 +218,7 @@
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -226,7 +226,7 @@
 .rotate-3 {
   --tw-rotate: 3deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -234,7 +234,7 @@
 .skew-x-12 {
   --tw-skew-x: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -242,7 +242,7 @@
 .skew-y-12 {
   --tw-skew-y: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -252,7 +252,7 @@
   --tw-scale-y: 0.95;
   --tw-scale-z: 0.95;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -260,7 +260,7 @@
 .transform,
 .transform-gpu {
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index 064b1879d2be..17b0ed13047a 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -194,7 +194,7 @@
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -202,7 +202,7 @@
 .-translate-x-4 {
   --tw-translate-x: -1rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -210,7 +210,7 @@
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -218,7 +218,7 @@
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -226,7 +226,7 @@
 .rotate-3 {
   --tw-rotate: 3deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -234,7 +234,7 @@
 .skew-x-12 {
   --tw-skew-x: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -242,7 +242,7 @@
 .skew-y-12 {
   --tw-skew-y: 12deg;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -252,7 +252,7 @@
   --tw-scale-y: 0.95;
   --tw-scale-z: 0.95;
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -260,7 +260,7 @@
 .transform,
 .transform-gpu {
   transform: perspective(var(--tw-perspective))
-    translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+    translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
     rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
     skew(var(--tw-skew-x), var(--tw-skew-y))
     scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js
index 22b75652a0aa..1a6c3df1aa8c 100644
--- a/tests/resolve-defaults-at-rules.test.js
+++ b/tests/resolve-defaults-at-rules.test.js
@@ -35,7 +35,7 @@ crosscheck(() => {
         .rotate-3 {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -43,7 +43,7 @@ crosscheck(() => {
         .skew-y-6 {
           --tw-skew-y: 6deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -51,7 +51,7 @@ crosscheck(() => {
         .scale-x-110 {
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -96,7 +96,7 @@ crosscheck(() => {
         .hover\:scale-x-110:hover {
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -104,7 +104,7 @@ crosscheck(() => {
         .focus\:rotate-3:focus {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -112,7 +112,7 @@ crosscheck(() => {
         .hover\:focus\:skew-y-6:focus:hover {
           --tw-skew-y: 6deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -156,7 +156,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -165,7 +165,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -208,7 +208,7 @@ crosscheck(() => {
         .group:hover .group-hover\:scale-x-110 {
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -216,7 +216,7 @@ crosscheck(() => {
         .peer:focus ~ .peer-focus\:rotate-3 {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -262,7 +262,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -271,7 +271,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -321,7 +321,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-scale-x: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -330,7 +330,7 @@ crosscheck(() => {
           content: var(--tw-content);
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -415,7 +415,7 @@ crosscheck(() => {
         .foo {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -426,7 +426,7 @@ crosscheck(() => {
           --tw-scale-y: 1.1;
           --tw-scale-z: 1.1;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -434,7 +434,7 @@ crosscheck(() => {
         .baz:before {
           --tw-rotate: 45deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -442,7 +442,7 @@ crosscheck(() => {
         .whats ~ .next > span:hover {
           --tw-skew-x: 6deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -451,7 +451,7 @@ crosscheck(() => {
           .media-queries {
             --tw-rotate: 45deg;
             transform: perspective(var(--tw-perspective))
-              translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+              translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
               rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
               skew(var(--tw-skew-x), var(--tw-skew-y))
               scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -462,7 +462,7 @@ crosscheck(() => {
         .c {
           --tw-skew-y: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -471,7 +471,7 @@ crosscheck(() => {
         .b {
           --tw-rotate: 45deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -480,7 +480,7 @@ crosscheck(() => {
         .b:after {
           --tw-rotate: 90deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -488,7 +488,7 @@ crosscheck(() => {
         .recursive {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -548,7 +548,7 @@ crosscheck(() => {
         .a:before {
           --tw-rotate: 45deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -556,7 +556,7 @@ crosscheck(() => {
         .b:after {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -564,7 +564,7 @@ crosscheck(() => {
         .c:first-line {
           --tw-rotate: 1deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -572,7 +572,7 @@ crosscheck(() => {
         .d:first-letter {
           --tw-rotate: 6deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -721,7 +721,7 @@ crosscheck(() => {
         .rotate-3 {
           --tw-rotate: 3deg;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -837,7 +837,7 @@ crosscheck(() => {
           --tw-scale-y: 1.5;
           --tw-scale-z: 1.5;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));
@@ -871,7 +871,7 @@ crosscheck(() => {
           --tw-scale-y: 1.5;
           --tw-scale-z: 1.5;
           transform: perspective(var(--tw-perspective))
-            translate(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
+            translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z))
             rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate))
             skew(var(--tw-skew-x), var(--tw-skew-y))
             scale3d(var(--tw-scale-x), var(--tw-scale-y), var(--tw-scale-z));