tailwindcss/packages/@tailwindcss-postcss
Kris Braun dadb096da2
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
2024-03-19 17:52:32 +01:00
..
2024-03-19 17:52:32 +01:00
2024-03-05 14:29:15 +01:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.