diff --git a/src/corePlugins.js b/src/corePlugins.js
index e4d2ff279a30..0109ae5fc531 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))',
+  '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))',
 ].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('perspectiveSelf', [
+    [
+      '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: cssTransformValueGpu },
       '.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..4d483ee323a3 100644
--- a/stubs/config.full.js
+++ b/stubs/config.full.js
@@ -886,6 +886,26 @@ 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: {
+      DEFAULT: '500px',
+      none: 'none',
+      dramatic: '100px',
+      near: '300px',
+      normal: '500px',
+      midrange: '800px',
+      distant: '1200px',
+    },
     transitionDelay: {
       0: '0s',
       75: '75ms',
diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index 7b787396647c..bcf6ab4ce030 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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .animate-\[var\(--any-value\)\] {
           animation: var(--any-value);
diff --git a/tests/apply.test.js b/tests/apply.test.js
index e4af6ee58a77..1d8145a0c523 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))
+            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));
           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))
+            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));
         }
       `)
     })
@@ -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))
+            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 214d086017ee..de46f27a1b92 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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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..99442d2f3b35 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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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..9e6afbec3d56 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))
+    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));
 }
 .-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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .-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))
+    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-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))
+    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-none {
   transform: none;
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 720c783e91ab..b03e9c11e9e8 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))
+    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));
 }
 .-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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .-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))
+    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-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))
+    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-none {
   transform: none;
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index 3b02c8966014..db5fdefa2391 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))
+            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: 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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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: 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))
+            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));
         }
         .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))
+            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));
         }
         .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..750e0efffa0e 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))
+    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));
 }
 .-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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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-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))
+    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));
 }
 .animate-none {
   animation: none;
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index dba9f3194292..17b0ed13047a 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))
+    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));
 }
 .-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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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));
 }
 .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))
+    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-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))
+    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));
 }
 .animate-none {
   animation: none;
diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js
index 5c7e0738e7ba..1a6c3df1aa8c 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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         @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))
+              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));
           }
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
         .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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
       `)
     })
@@ -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))
+            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));
         }
       `)
     })
@@ -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))
+            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/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: ;