CSS Function - rotateZ()
The rotateZ() function in CSS is used to rotate an element around the z-axis without causing any deformation, on a three-dimensional plane. The result is a transform() datatype.
The axis of rotation passes through the transform origin. Using the CSS property transform-origin, the transform origin can be changed and customized.
The rotation of the element created by the rotateZ() function is specified by an <angle>. The movement of the rotation will be clockwise, if the angle value is positive and will be anti-clockwise if the value is negative.
Possible values
The function rotateZ() can take only one parameter. It specifies the angle of rotation.
<angle>: Represented in degrees. A positive angle rotates the element in clockwise direction; whereas a negative value rotates it anti-clockwise.
Syntax
transform: rotateZ(35deg) | rotateZ(-35deg);
CSS rotateZ() - Combination of Values
Following is an example of rotateZ() function with various values as parameter, such as deg, turn, grads:
<html> <head> <style> #container { display: flex; } #sample-div { height: 100px; width: 100px; border: 2px solid black; background-image: url('images/logo.png'); margin-bottom: 2em; } section { padding: 25px; border: 2px solid red; } .rotate-z-positive { transform: rotateZ(45deg); background-image: url('images/logo.png'); } .rotate-z-negative { transform: rotateZ(-75deg); background-image: url('images/logo.png'); } .rotate-z-turn { transform: rotateZ(2.5turn); background-image: url('images/logo.png'); } .rotate-z-grads { transform: rotateZ(2grads); background-image: url('images/logo.png'); } </style> </head> <body> <div id="container"> <section> <p>no rotation</p> <div id="sample-div"></div> </section> <section> <p>rotateZ(45deg)</p> <div class="rotate-z-positive" id="sample-div"></div> </section> <section> <p>rotateZ(-75deg)</p> <div class="rotate-z-negative" id="sample-div"></div> </section> <section> <p>rotateZ(2.5turn)</p> <div class="rotate-z-turn" id="sample-div"></div> </section> <section> <p>rotateZ(2grads)</p> <div class="rotate-z-grads" id="sample-div"></div> </section> </div> </body> </html>
To Continue Learning Please Login
Login with Google