Transforming Transformers with CSS Transform
Required Soundtrack for reading this blog:
Now that we’ve got the music settled, let’s move on to my topic for today, Transform. According to MDN, “the transform CSS property lets you translate, rotate, scale, or skew an element. It modifies the coordinate space of the CSS visual formatting model.”
Now, I’m admittedly not the best person when it comes to CSS. However, like everything with coding, it’s a skill that only gets better the more you study it. So let’s stretch our sparks and take a look at all of the things Transform can do! Autobots, roll out!
transform: translate(x, y)
First up on the transform tour, we’ll take a look at translate.
Translate is responsible for moving pieces of our page around the X and Y axis.
Translate takes in two arguments, the px/percent on the X axis, and the px/percent on the Y axis. That means an element with transform: translate(0px, 0px) would wind up in the center of our page.
If your CSS only needs you to move something on the X or Y axis and not a combination of both, you can use transform: translateX() and transform: translateY(). Both of these do what you’d expect them to, take in a px/percentage on how far along the X or Y axis you’d like your piece to be.
transform: rotate( )
Next up is transform: rotate(), which again does exactly what it says. Whichever element has transform: rotate() will rotate around to a certain degree.
How much our element is turned depends on what we put in as our argument. Rotate takes in an argument of degrees (deg), gradians (grad), radians (rad), turns (turn), and negative values.
Degrees are easy! If there’s 360deg in a full circle, then to flip something over would be 180deg, and to stand it on its side, 90deg.
Gradians is similar but instead of a scale of 360, it’s now 400. So 400grad is the same as 360deg, and 200grad is the same as 180deg.
Radians took me a minute to figure out, because the explanation gave me some weird math stuffs. Upon fiddling around with it, I found that 180deg is about the same as 3.14rad (Woah! It’s our friend, pi! Math is cool!). That means that double pi (3.28rad) is the same as 360deg.
Turns are very simple, 1turn is the same as one full circle. So .5turn would be the same as half that.
Negative values are similar to our degrees, however, it will return something that rotates counterclockwise.
transform: scale(sx, sy)
Scale takes our elements and…well…scales them to be larger!
Scale takes in one or two arguments. The first argument alone would stretch the element equally across the X and Y axis based on any valid number. So, transform: scale(2), would scale our element by that amount(2).
We can do the exact same as above by using two arguments, too! In this case, we’ll use transform: scale(2, 2). Here we are explicitly telling our page to scale the X axis and Y axis for an amount of 2. If we wanted our picture to stretch further across the Y axis, we could do something like transform: scale(2, 3).
transform: skew(xdeg, ydeg)
Skew, in practice, works very similarly to scale. It can take in one or two arguments. The largest difference is that instead of working with any valid number, we use degrees (deg).
Like in the case of scale, if skew has a lone argument that means that the element will be skewed equally along the X and Y axis to a number of degrees.
Again, just like with scale, we can alter the amount an element is skewed on the X and Y axis individually by using a second argument. So transform: skew(20deg, 40deg) would skew an element for 20deg on the X axis and 40deg on the Y axis.
I mentioned earlier that I wasn’t too great at CSS, but diving this deeply into a single CSS property really gave me some legs to stand on while thinking about how to design future features. Though this was the first time I’ve written about CSS, it won’t be my last! Give me a follow if you like what you see! And check me out on twitter @teapuddles.
