AtoZ CSS Screencast: The rotateY CSS Transform

Share this article

AtoZ CSS Screencast: The rotateY CSS Transform
Loading the player…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

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.

img {
  transform: rotate(10deg);
}

This is the same as using the single-axis rotation of rotateZ() as the image is rotating around the z-axis.

When using rotateY(), the image rotates around the y-axis which can be a useful trick to achieve something like a card flip effect or something similar.

img {
  transform: rotateY(45deg);
}

If I add in an animation that continuously rotates the image around the y-axis, it should be a bit clearer as to what’s going on.

img {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

You may notice that when the element rotates around 180 degrees, the image appears to become a mirror image. By default, the back of the image is visible even when rotated around so the front face of it is pointing away from the viewer.

The visibility of the back of the element can be controlled with the backface-visibility property. It takes the values visible or hidden where visible is the default.

A slightly more sane use of rotate is to add subtle effects to elements on the page. The browser support is IE9+ but because this is a fairly unimportant cosmetic bit of styling, having non-rotated elements in old IE isn’t a big deal to me. It’s always worth testing to be on the safe side, though – just in case.

Perspective

When dealing with elements in 3D space, we can make the visual effect more extreme by bringing perspective into the equation.

Back in art class you might have learned that to achieve the effect of three dimensions on a 2D piece of paper, you can draw a series of straight lines from a vanishing point and ensure all horizontal features moving away from the viewer all converge at that point.

This photo illustrates perspective quite nicely. But how does this feature in CSS?

Here I’ve got the markup for a cube. The six faces of the cube are contained within the “cube-x” <div> which is contained within two others so eventually we can take a look at rotating the cube in three dimensions.

<div class="container"> 
  <div class="cube-z"> 
    <div class="cube-y"> 
      <div class="cube-x"> 
        <div class="face-one">1</div> 
        <div class="face-two">2</div> 
        <div class="face-three">3</div> 
        <div class="face-four">4</div> 
        <div class="face-five">5</div> 
        <div class="face-six">6</div> 
      </div> 
    </div> 
  </div> 
</div>
.container {
  width: 400px;
  margin: 100px auto;
}
[class^="cube"] {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
[class^="face-"] {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 20px;
  color: rgba(0,0,0,0.75);
  border: 1px solid;

  font-size: 160px;
  font-family: Avenir;
  line-height: 1;
  text-align: center;
}

.face-one {
  transform: translateZ(100px);
  background-color: hsla(329,58%,52%,0.8);  
}
.face-two {
  transform: rotateX(90deg) translateZ(100px);
  background-color: hsla(0,0%,13%,0.8);
}
.face-three {
  transform: rotateY(90deg) translateZ(100px);
  background-color: hsla(54,70%,68%,0.8);
}
.face-four {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: hsla(190,81%,67%,0.8);
}
.face-five {
  transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
  background-color: hsla(261,100%,75%,1.0);
}
.face-six {
  transform: rotateY(180deg) translateZ(100px);
  background-color: hsla(84,76%,53%,0.8);
}
.cube-z {transform: rotateZ(0deg);}
.cube-y {transform: rotateY(0deg);}
.cube-x {transform: rotateX(0deg);}

At the moment the first face of the cube is visible on a 2D plane and none of the other sides are visible.

If I rotate the “container” around the y-axis, we’ll be able to see each side in turn.

.cube-z {animation: spin 4s infinite linear;}

@keyframes spin {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

This gives us a sense of three dimensions but if we add a bit of perspective, the effect becomes much clearer and a real sense of 3D is achieved.

.container {
  perspective: 500px;
  perspective-origin: 25% 50%;
}

I’ll stop the animation and let’s have a look at what’s going on here.

The perspective property controls the distance between the viewer and the zero point of the z-axis. A higher value moves the viewer further away, a lower value, moves the viewer closer which drastically increases the impact of the 3D positioning.

We can control the placement of the vanishing point by changing the perspective-origin property.

This property takes two length values, the first for the horizontal position and the second for the vertical. Manipulating these values changes the angle of view of the element and when the animation is turned back on, the effect can be quite striking.

We’re almost at an end to this AtoZ series, so watch this space for the final letter where I discuss using the z-index.

Frequently Asked Questions about CSS RotateY

What is the CSS RotateY function and how does it work?

The CSS RotateY function is a transformation function that allows you to rotate an element around its Y-axis in a 3D space. This means that the element will rotate from the front to the back or vice versa. The rotation is specified by an angle, which is provided as the function’s parameter. The angle can be defined in degrees (deg), radians (rad), gradians (grad), or turns. For example, rotateY(45deg) will rotate the element 45 degrees around its Y-axis.

How can I use the CSS RotateY function in my code?

To use the CSS RotateY function, you need to apply it to an element in your CSS code. You can do this by using the ‘transform’ property followed by the ‘rotateY’ function and the desired rotation angle. Here’s an example:

div {
transform: rotateY(45deg);
}
In this example, the ‘div’ element will be rotated 45 degrees around its Y-axis.

Can I combine the CSS RotateY function with other transformation functions?

Yes, you can combine the CSS RotateY function with other transformation functions. You can do this by listing the functions, separated by spaces, in the ‘transform’ property. For example, you can rotate an element around its Y-axis and scale it at the same time like this:

div {
transform: rotateY(45deg) scale(1.5);
}
In this example, the ‘div’ element will be rotated 45 degrees around its Y-axis and scaled by a factor of 1.5.

What happens if I use a negative angle with the CSS RotateY function?

If you use a negative angle with the CSS RotateY function, the element will be rotated in the opposite direction. For example, rotateY(-45deg) will rotate the element 45 degrees in the opposite direction around its Y-axis.

Can I animate the CSS RotateY function?

Yes, you can animate the CSS RotateY function using CSS animations or transitions. This allows you to create a rotating effect that changes over time, which can be used to create interesting visual effects.

Does the CSS RotateY function work in all browsers?

The CSS RotateY function is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not work in older browsers or versions. To ensure compatibility, you can use vendor prefixes or fallbacks.

What units can I use with the CSS RotateY function?

The CSS RotateY function accepts several units for the rotation angle, including degrees (deg), radians (rad), gradians (grad), and turns. Each unit represents a different way of measuring the rotation angle.

Can I use the CSS RotateY function on 2D elements?

While the CSS RotateY function is designed for 3D transformations, you can use it on 2D elements. However, the effect may not be as noticeable or as expected, as the element will be rotated around its Y-axis in a 3D space.

How does the CSS RotateY function affect the layout of my page?

The CSS RotateY function does not affect the layout of your page. The transformed element will still occupy the same space as before, and other elements will not move to fill the space left by the transformed element.

Can I control the speed of the rotation with the CSS RotateY function?

While the CSS RotateY function itself does not control the speed of the rotation, you can control the speed by using CSS animations or transitions. By adjusting the duration of the animation or transition, you can make the rotation faster or slower.

Guy RoutledgeGuy Routledge
View Author

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

aleczandergAtoZ CSSlearn-advanced-css
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form