Skip to content

Commit dadb096

Browse files
KrisBraunKrisBraun
authored
3D transform utilities (#13248)
* 3D rotation utilities * Validate rotate values * Replace forEach with for loop * transform-style, transform-box, and backface-visibility utilities * Tests for transform utilities * 'perspective' utility * Fix tests * Remove unnecessary suggestion; move function comments * scale-z * Fix Intellisense test * perspective-origin * scale-3d * Only include the z component of scale if it's defined We want to avoid triggerring unnecessary 3D transformations. * Comment the reason for setting --tw-rotate * Test full bare rotate * Fix merge * Comment on rotate arbitrary value * perspective bare values Support `perspective-123` (but not `perspective-potato`) * scale-3d as a static modifier to scale Instead of scale-3d taking a separate scale, it modifies scale to apply in three dimensions. * Test that scale-x overrides scale * scale arbitrary values Support arbitrary value for scale (e.g. `scale-[1_2_3.5]`). * Specify rotation axis using a modifier Support single rotation angles in line with the [CSS `rotate` property](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate). Using modifiers (e.g. `rotate-45/x`) makes it clearer that the axis of rotation is modified. Thanks @adamwathan for this suggestion. Composing angles is only supported in CSS via a pipeline of `transform` functions. I'll add arbitrary value support to `transform` next as an escape hatch for those cases that need more complex transformations. * Use property defaults for scale-3d * `transform` arbitrary values Support arbitrary values for `transform`. The `skew-x` and `skew-y` transforms are applied before any arbitrary transformations. * Add translate-z and translate-3d Both work the same way as scale-z and scale-3d. * Add translate-[xyz]-px * Comment on how skewX and skewY are applied * Remove unnecessary suggest * Simplify translate * Fix up comment on rotate syntax * Back to rotate-x and rotate-y rather than rotate modifiers * 3D transform test fixes
1 parent d2be632 commit dadb096

File tree

11 files changed

+857
-170
lines changed

11 files changed

+857
-170
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
393393
--line-height-8: 2rem;
394394
--line-height-9: 2.25rem;
395395
--line-height-10: 2.5rem;
396+
--perspective-dramatic: 100px;
397+
--perspective-near: 300px;
398+
--perspective-normal: 500px;
399+
--perspective-midrange: 800px;
400+
--perspective-distant: 1200px;
396401
--transition-timing-function-linear: linear;
397402
--transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
398403
--transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
392392
--line-height-8: 2rem;
393393
--line-height-9: 2.25rem;
394394
--line-height-10: 2.5rem;
395+
--perspective-dramatic: 100px;
396+
--perspective-near: 300px;
397+
--perspective-normal: 500px;
398+
--perspective-midrange: 800px;
399+
--perspective-distant: 1200px;
395400
--transition-timing-function-linear: linear;
396401
--transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
397402
--transition-timing-function-out: cubic-bezier(0, 0, .2, 1);

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,24 @@ exports[`getClassList 1`] = `
9191
"-rotate-45",
9292
"-rotate-6",
9393
"-rotate-90",
94+
"-rotate-x-0",
95+
"-rotate-x-1",
96+
"-rotate-x-12",
97+
"-rotate-x-180",
98+
"-rotate-x-2",
99+
"-rotate-x-3",
100+
"-rotate-x-45",
101+
"-rotate-x-6",
102+
"-rotate-x-90",
103+
"-rotate-y-0",
104+
"-rotate-y-1",
105+
"-rotate-y-12",
106+
"-rotate-y-180",
107+
"-rotate-y-2",
108+
"-rotate-y-3",
109+
"-rotate-y-45",
110+
"-rotate-y-6",
111+
"-rotate-y-90",
94112
"-scale-0",
95113
"-scale-100",
96114
"-scale-105",
@@ -124,6 +142,17 @@ exports[`getClassList 1`] = `
124142
"-scale-y-75",
125143
"-scale-y-90",
126144
"-scale-y-95",
145+
"-scale-z-0",
146+
"-scale-z-100",
147+
"-scale-z-105",
148+
"-scale-z-110",
149+
"-scale-z-125",
150+
"-scale-z-150",
151+
"-scale-z-200",
152+
"-scale-z-50",
153+
"-scale-z-75",
154+
"-scale-z-90",
155+
"-scale-z-95",
127156
"-scroll-m-0.5",
128157
"-scroll-m-1",
129158
"-scroll-m-3",
@@ -242,6 +271,10 @@ exports[`getClassList 1`] = `
242271
"-translate-y-1",
243272
"-translate-y-3",
244273
"-translate-y-4",
274+
"-translate-z-0.5",
275+
"-translate-z-1",
276+
"-translate-z-3",
277+
"-translate-z-4",
245278
"-underline-offset-0",
246279
"-underline-offset-1",
247280
"-underline-offset-2",
@@ -347,6 +380,8 @@ exports[`getClassList 1`] = `
347380
"backdrop-sepia-0",
348381
"backdrop-sepia-100",
349382
"backdrop-sepia-50",
383+
"backface-hidden",
384+
"backface-visible",
350385
"basis-0.5",
351386
"basis-1",
352387
"basis-3",
@@ -1180,6 +1215,18 @@ exports[`getClassList 1`] = `
11801215
"pe-1",
11811216
"pe-3",
11821217
"pe-4",
1218+
"perspective-dramatic",
1219+
"perspective-none",
1220+
"perspective-normal",
1221+
"perspective-origin-bottom",
1222+
"perspective-origin-bottom-left",
1223+
"perspective-origin-bottom-right",
1224+
"perspective-origin-center",
1225+
"perspective-origin-left",
1226+
"perspective-origin-right",
1227+
"perspective-origin-top",
1228+
"perspective-origin-top-left",
1229+
"perspective-origin-top-right",
11831230
"pl-0.5",
11841231
"pl-1",
11851232
"pl-3",
@@ -1266,6 +1313,24 @@ exports[`getClassList 1`] = `
12661313
"rotate-45",
12671314
"rotate-6",
12681315
"rotate-90",
1316+
"rotate-x-0",
1317+
"rotate-x-1",
1318+
"rotate-x-12",
1319+
"rotate-x-180",
1320+
"rotate-x-2",
1321+
"rotate-x-3",
1322+
"rotate-x-45",
1323+
"rotate-x-6",
1324+
"rotate-x-90",
1325+
"rotate-y-0",
1326+
"rotate-y-1",
1327+
"rotate-y-12",
1328+
"rotate-y-180",
1329+
"rotate-y-2",
1330+
"rotate-y-3",
1331+
"rotate-y-45",
1332+
"rotate-y-6",
1333+
"rotate-y-90",
12691334
"rounded-b-full",
12701335
"rounded-b-none",
12711336
"rounded-bl-full",
@@ -1350,6 +1415,7 @@ exports[`getClassList 1`] = `
13501415
"scale-125",
13511416
"scale-150",
13521417
"scale-200",
1418+
"scale-3d",
13531419
"scale-50",
13541420
"scale-75",
13551421
"scale-90",
@@ -1376,6 +1442,17 @@ exports[`getClassList 1`] = `
13761442
"scale-y-75",
13771443
"scale-y-90",
13781444
"scale-y-95",
1445+
"scale-z-0",
1446+
"scale-z-100",
1447+
"scale-z-105",
1448+
"scale-z-110",
1449+
"scale-z-125",
1450+
"scale-z-150",
1451+
"scale-z-200",
1452+
"scale-z-50",
1453+
"scale-z-75",
1454+
"scale-z-90",
1455+
"scale-z-95",
13791456
"scroll-auto",
13801457
"scroll-m-0.5",
13811458
"scroll-m-1",
@@ -1608,9 +1685,16 @@ exports[`getClassList 1`] = `
16081685
"touch-pan-y",
16091686
"touch-pinch-zoom",
16101687
"transform",
1688+
"transform-3d",
1689+
"transform-border",
1690+
"transform-content",
16111691
"transform-cpu",
1692+
"transform-fill",
1693+
"transform-flat",
16121694
"transform-gpu",
16131695
"transform-none",
1696+
"transform-stroke",
1697+
"transform-view",
16141698
"transition",
16151699
"transition-all",
16161700
"transition-colors",
@@ -1621,18 +1705,27 @@ exports[`getClassList 1`] = `
16211705
"translate-0.5",
16221706
"translate-1",
16231707
"translate-3",
1708+
"translate-3d",
16241709
"translate-4",
16251710
"translate-full",
16261711
"translate-x-0.5",
16271712
"translate-x-1",
16281713
"translate-x-3",
16291714
"translate-x-4",
16301715
"translate-x-full",
1716+
"translate-x-px",
16311717
"translate-y-0.5",
16321718
"translate-y-1",
16331719
"translate-y-3",
16341720
"translate-y-4",
16351721
"translate-y-full",
1722+
"translate-y-px",
1723+
"translate-z-0.5",
1724+
"translate-z-1",
1725+
"translate-z-3",
1726+
"translate-z-4",
1727+
"translate-z-full",
1728+
"translate-z-px",
16361729
"truncate",
16371730
"underline",
16381731
"underline-offset-0",

‎packages/tailwindcss/src/index.test.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,12 @@ describe('@apply', () => {
227227
syntax: "<length-percentage>";
228228
inherits: false;
229229
initial-value: 0;
230+
}
231+
232+
@property --tw-translate-z {
233+
syntax: "<length-percentage>";
234+
inherits: false;
235+
initial-value: 0;
230236
}"
231237
`)
232238
})

‎packages/tailwindcss/src/intellisense.test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ function loadDesignSystem() {
1414
theme.add('--breakpoint-sm', '640px')
1515
theme.add('--font-size-xs', '0.75rem')
1616
theme.add('--font-size-xs--line-height', '1rem')
17+
theme.add('--perspective-dramatic', '100px')
18+
theme.add('--perspective-normal', '500px')
1719
return buildDesignSystem(theme)
1820
}
1921

‎packages/tailwindcss/src/property-order.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,10 @@ export default [
7474
// '--tw-rotate',
7575
'--tw-skew-x',
7676
'--tw-skew-y',
77+
'--tw-scale-x',
78+
'--tw-scale-y',
79+
'--tw-scale-z',
7780
'scale',
78-
// '--tw-scale-x',
79-
// '--tw-scale-y',
8081
'transform',
8182

8283
'animation',

‎packages/tailwindcss/src/theme.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ export type ThemeKey =
197197
| '--outline-offset'
198198
| '--padding'
199199
| '--placeholder-color'
200+
| '--perspective'
201+
| '--perspective-origin'
200202
| '--radius'
201203
| '--ring-color'
202204
| '--ring-offset-color'

0 commit comments

Comments
 (0)