From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

CSS transforms

CSS transforms - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

CSS transforms

If you think simple drop shadows and transitions were cool, well get ready to be amazed by CSS Transform. The transform property allows us to scale, skew, rotate, move, and change the perspective of any element within the view port. Combining a transform with a transition can create some truly interesting and interactive experiences. Again, using pure CSS. Let's take these three boxes as an example again. As in the previous movie, when you hover over or focus on one of the boxes, it gets a transition drop shadow. That's cool, but we can make it better with a transform. Let's transform the scale of the item on hover to make it bigger so that it really pops out. Just like before, we need to select an item first, inspect it, and I want to toggle the hover states, so we get the right rule. Here we have Box A hover, and now we're going to experiment with transform. So first I'll just try to scale it. Transform, scale, and let's try 1.1. And what happens, right away is the boxes now pop out…

Contents