AtoZ CSS Quick Tip: Using Y-Axis Transforms and Matrices

Y is for Y-Axis transforming and matrices

We can perform all sorts of interesting transformations on elements along various different axis. In this tip, we’ll provide a rundown of all the common options and then look at a lesser known value of transform which allows us to set multiple transform via the matrix() value.

transform along the y-axis

Since the original screencast focused around rotateY(), I thought it would be useful to look at all other available transformations that happen along the vertical y-axis.

We can apply the following transformations:

• transform:translateY(100px)
• transform:rotateY(45deg)
• transform:scaleY(1.5)
• transform:skewY(30deg)

These values are all limited to the y-axis and can be used to communicate intent that the only transformation along this single axis is being performed.

rotateY() is the only one of these values that performs a 3D transformation, where the element is rotated around the y-axis. If performing any kind of 3D transform, be sure to set transform-style:preserve-3d on the parent element.

Multiple transform

If you want to combine multiple transform together, this can be done by space separating the different transformation functions. The following snippet combines a translation with a skew for example:

Continue reading %AtoZ CSS Quick Tip: Using Y-Axis Transforms and Matrices%

by Guy Routledge via SitePoint