rotateZ() | CSS-Tips

The CSS rotateZ() operate rotates a component round its z-axis, so clockwise or counterclockwise. Whereas it produces the identical visible impact because the rotate() operate, it’s finest utilized in 3D transformations. It’s one among many rework features used together with the rework property.

Within the demo, we first arrange a stage for our 3D ingredient with perspective. It represents the projection of the 3D ingredient from the viewer’s perspective, indicating how far or shut the thing seems.

.stage {
  perspective: 800px;
}

We then simulate the tumbling impact of a coin that’s spun on a desk in sluggish movement, so we use three 3D rotation rework features: rotateX(), rotateY(), and rotateZ().

The rotate() shorthand can’t be used right here as a result of it maps to a 2D matrix and will result in incorrect calculations within the browser’s matrix math when mixed with 3D features.

.tumbling-coin {
  animation: tumble 3s infinite linear;
}

@keyframes tumble {
  0% {
    rework: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    rework: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
  }
}

The rotateZ() operate is outlined within the CSS Transforms Module Degree 2 specification.

Syntax

 = rotateZ( [  |  ] )

Arguments

/*  in levels */
rotateZ(90deg)   /* Component rotates 90 levels clockwise */
rotateZ(-180deg) /* Component rotates 180 levels counterclockwise */

/*  in turns */
rotateZ(0.25turn) /* Component makes a quater flip clockwise */
rotateZ(1turn) /* Component completes a full 360-degree rotation */

/*  in radians */
rotateZ(1.57rad) /* Roughly 90 levels clockwise */
rotateZ(-3.14rad) /* Roughly 180 levels counterclockwise */

The rotateZ() operate takes a single  argument, which specifies how a lot to rotate the ingredient across the z-axis

The route the ingredient spins is determined by whether or not the angle worth is constructive or adverse

• A constructive angle spins within the clockwise route, whereas
• A adverse angle spins within the counterclockwise route

The  kind will be one among 4 models:

• deg: One diploma is 1/360 of a full circle.
• grad: One gradian is 1/400 of a full circle.
• rad: A radian is the size of a circle’s diameter across the form’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is the same as 6.2832rad or 360deg.
• flip: One flip is one full circle. So, midway round a circle is the same as .5turn, or 180deg.

Primary utilization

The rotateZ() and rotate() features have the identical visible impact, however their functions are finest suited to 3D and 2D animations, respectively. Additionally, rotateZ() is a greater choice for any animation that requires the GPU compositing layer, because it’s hardware-accelerated.

On this demo, rotateZ() is used as a substitute of rotate() although they’ve the identical visible impact. Nonetheless, in case you have a fancy animation on a webpage with plenty of heavy DOM components, rotate() may trigger the browser to always recalculate the structure on the primary thread. Through the use of rotateZ(), you drive browser to advertise that particular ingredient to its personal layer on the pc’s GPU, making the animation smoother and sooner.

.gpu-spinner {
  animation: gpu-spin 1s linear infinite;
}

@keyframes gpu-spin {
  from {
    rework: rotateZ(0deg);
  }
  to {
    rework: rotateZ(360deg);
  }
}

Instance: Isometric card

When constructing 3D results, you must rotate components on a number of axes. Whereas combining rework: rotateX(60deg) rotate(-45deg) technically works, utilizing rework: rotateX(60deg) rotateZ(-45deg) is the semantically appropriate strategy.

.isometric-container {
  perspective: 1000px;
}

.isometric-card {
  transition: rework 0.5s ease;
  rework: rotateX(60deg) rotateZ(-45deg);
}

.isometric-card:hover {
  rework: rotateX(0deg) rotateZ(0deg) scale(1.1);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

Specification

The rotateZ() operate is outlined within the CSS Transforms Module Degree 2 specification.

Browser help

The rotateZ() operate has baseline help on all trendy browsers.

Associated