From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Transforms, transitions, and animations

Transforms, transitions, and animations - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Transforms, transitions, and animations

“

- [Instructor] Take a look at this page with some images and descriptions about some trees. We can make this page look a little more interesting by adding some transforms to these images. CSS transforms lets you rotate, scale or skew elements. Tailwind has utility glasses with the same names. So you can scale this image using the scale class. Scale and then anything above 100 increases the size. So let's say if I add 125, it's 25% bigger, and if anything less than 100, like scale 80 or 90, 95, all of these will scale the image down. So now it's 90%. You can use the rotate classes, so rotate followed by a number, which is the degrees. So something like rotate three will rotate it in the clockwise direction three degrees. So maybe you could add rotate three in the anti-clockwise direction by adding a minus here. So that will rotate it in the anti-clockwise direction. This is something you can add to the third class as well. So now this adds some fun element to the page. You can even use…

Contents