AtoZ CSS Screencast: The rotateY CSS Transform

In the previous episode we learned about the transform property and the value translateX().

In this episode we’ll be digging deeper into transforms and manipulating elements in 3D.

In this episode we’ll learn all about:

• 3D space in CSS
• How to rotate elements around their vertical and horizontal axis
• And how perspective works

3D space

The browser acts a bit like a two-dimensional canvas on which we layout blocks of content and style images, text and links to create a website or web app.

If you recall high-school maths, when looking at a graph there is a horizontal x-axis and a vertical y-axis.

There’s a third axis that comes directly out from the screen, known as the z-axis. We’ll look into this more in the final episode of this season when we talk about z-index. For now, we just need to know that there is a third dimension and we can transform elements from being in a 2D plane to a 3D one using 3D transforms.

When dealing with elements in 3D space, we can ensure they appear visually as if they are in a third plane by setting the transform-style property to preserve-3d on the parent container.

This will allow all child elements to appear in 3D space. If this property is not set, elements will appear flattened and the effect won’t be as obvious.

Rotate

Rotation can be very useful in many aspects of design - from a complete 180 to just a small handful of degrees.

The default axis of rotation is the z-axis.

The amount of rotation can be specified in degrees or radians. I vaguely remember radians from maths class but I always use degrees because they feel a lot more comfortable to me.

I’ve got an image here with a white border around it and a drop shadow. If I wanted to rotate the image, I can do so by using the transform property and the the rotate() function.

A positive value with rotate clockwise and a negative value, anti-clockwise.

Continue reading %AtoZ CSS Screencast: The rotateY CSS Transform%

by Guy Routledge via SitePoint