revision:
- allows you to rotate elements. The rotate property defines a value for how much an element is rotated clockwise around z-axis. To rotate an element around x-axis or y-axis or in other ways, this must be defined.
Values for rotate property can be given as one angle, axis name + angle, or three values + angle.
If an angle is given, the element is rotated clockwise around z-axis.
If axis name + angle is given, the element is rotated clockwise around that given axis.
If three values are given + angle, the three values define a vector which the element is rotated around.
An alternative technique to rotate an element is to use CSS transform property with CSS rotate() function. The CSS rotate property is arguably a simpler and more direct way to scale an element.
Property values:
axis : optional. If not set, z-axis is default. Defines axis to rotate element around. Possible values: x, y, z
angle : defines how much an element is rotated. Possible units: deg, rad, turn
vector angle : three numbers define a vector for the element to be rotated around. The numbers are x-, y- and z-coordinates for the vector, respectively. The last value is the angle for how much to rotate. Possible values: number number number angle.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Rotates div element 30 degrees clockwise around z-axis.
Try to change rotate value to -30 degrees and see what happens.
<div>
<div id="rot">Hello</div><br>
<p>Rotates div element 30 degrees clockwise around z-axis.</p>
<p>Try to change rotate value to -30 degrees and see what happens.</p>
</div>
<style>
div#rot {height: 5vw; width: 5vw; background-color: red; rotate: 30deg;}
</style>
Changes the rotation of the red box. "1 1 0" creates vector [1 1 0] in the 2D plane with x- and y-coordinates, then rotates 60 degrees around that vector.
<div>
<p>Changes the rotation of the red box. "1 1 0" creates vector [1 1 0] in the 2D plane with
x- and y-coordinates, then rotates 60 degrees around that vector.</p>
<div id="DIV1">DIV1
<div id="DIV2original">DIV2</div>
<div id="DIV2">DIV2</div>
</div>
</div>
<style>
#DIV1 {width: 15vw; height: 15vw; padding: 1vw; margin: auto; border: 0.2vw solid black;}
#DIV2 {height: 10vw; width: 10vw; border: 0.1vw solid black;background-color: red;
rotate: 1 1 0 60deg;}
#DIV2original {position: absolute; width: 10vw; height: 10vw; border: 0.2vw dashed grey;
background-color: lightgrey; opacity: 0.5;}
</style>