Ever since the inception of CSS, elements have been rectangular and firmly oriented on the horizontal and vertical axes. Several tricks
arose to make elements look like they were tilted and so on, but
underneath it all was a rigid grid.
With
CSS transforms, you have the ability to break that visual grid and shake up the way your elements are presented.
Whether it’s as simple as rotating some photographs a
bit to make them appear more natural, or creating interfaces where
information can be revealed by flipping over elements, or doing
interesting perspective tricks with sidebars, CSS transforms can—if
you’ll pardon the obvious expression—transform the way you design.
Coordinate Systems
Before embarking on this journey, let’s take a moment to orient
ourselves. Specifically, let’s review the coordinate systems used to define positions or movement in space as a sequence of measurements.
Two types of coordinate systems are used in
transforms, and it’s a good idea to be familiar with both.
The first is the Cartesian coordinate system, often called the
x/y/z coordinate system. This system describes the position
of a point in space by using two numbers (for two-dimensional placement) or three numbers (for three-dimensional placement). In CSS, the system uses three axes: the x-axis (horizontal); the y-axis (vertical); and the z-axis (depth). This is illustrated in Figure 17-1.
Figure 17-1. The three Cartesian axes used in CSS transforms
For any two-dimensional ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
