Join Morten Rand-Hendriksen for an in-depth discussion in this video CSS transforms, part of Responsive Web Design in the Browser.
- View Offline
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 from the background.…
Now, the reason why you're seeing this transition…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser