CSS Function - rotateY()
The rotateY() function in CSS is used to rotate an element around the y-axis (vertical) on the two-dimensional surface. The result is a <transform-function> 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 rotateY() 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 rotateY() 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: rotateY(35deg) | rotateY(-35deg);
CSS rotateY() - Combination of Values
Following is an example of rotateY() function with a positive and negative angles as parameter:
<html> <head> <style> #container { display: flex; } #sample-div { height: 100px; width: 100pX; border: 2py solid black; background-image: url('images/logo.png'); margin-bottom: 2em; } section { padding: 25px; border: 2px solid red; } .rotate-y-positive { transform: rotateY(45deg); background-image: url('images/logo.png'); } .rotate-y-negative { transform: rotateY(-75deg); background-image: url('images/logo.png'); } .rotate-y-turn { transform: rotateY(2.5turn); background-image: url('images/logo.png'); } .rotate-y-grads { transform: rotateY(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>rotateY(45deg)</p> <div class="rotate-y-positive" id="sample-div"></div> </section> <section> <p>rotateY(-75deg)</p> <div class="rotate-y-negative" id="sample-div"></div> </section> <section> <p>rotateY(2.5turn)</p> <div class="rotate-y-turn" id="sample-div"></div> </section> <section> <p>rotateY(2grads)</p> <div class="rotate-y-grads" id="sample-div"></div> </section> </div> </body> </html>
To Continue Learning Please Login
Login with Google