rotateZ() | CSS-Tips – blog.aimactgrow.com

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

CodePen Embed Fallback

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

.stage {
  perspective: 800px;
}

We then simulate the tumbling impact of a coin that’s spun on a desk in gradual movement, so we use three 3D rotation remodel 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 fallacious calculations within the browser’s matrix math when mixed with 3D features.

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

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

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

Syntax

 = rotateZ( [  |  ] )

Arguments

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

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

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

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

The course the factor spins is determined by whether or not the angle worth is constructive or unfavorable

A constructive angle spins within the clockwise course, whereas
A unfavorable angle spins within the counterclockwise course

The sort may be one among 4 items:

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 possibility for any animation that requires the GPU compositing layer, because it’s hardware-accelerated.

CodePen Embed Fallback

On this demo, rotateZ() is used as an alternative of rotate() although they’ve the identical visible impact. Nonetheless, when you’ve got a fancy animation on a webpage with a number of heavy DOM components, rotate() may trigger the browser to continuously recalculate the format on the primary thread. Through the use of rotateZ(), you power browser to advertise that particular factor 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 {
    remodel: rotateZ(0deg);
  }
  to {
    remodel: rotateZ(360deg);
  }
}

Instance: Isometric card

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

.isometric-container {
  perspective: 1000px;
}

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

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

CodePen Embed Fallback