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.
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
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
deg: One diploma is1/360of a full circle.grad: One gradian is1/400of a full circle.rad: A radian is the size of a circle’s diameter across the form’s arc. One radian is180deg, or1/2of a full circle. One full circle is 2π radians, which is the same as6.2832rador360deg.flip: One flip is one full circle. So, midway round a circle is the same as.5turn, or180deg.
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.
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);
}Specification
The rotateZ() perform is outlined within the CSS Transforms Module Degree 2 specification.
Browser help
The rotateZ() perform has baseline help on all fashionable browsers.
