ROTATE
The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around.
SYNTAX
CSS
JS
object.style.rotate = "value";
VALUES
<'rotate'> = none | <angle> | [ x | y | z | <number>{3} ] && <angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
x
Rotation around the x axis.
y
Rotation around the y axis.
z
Rotation around the z axis.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
INITIAL
EXAMPLES
ANGLE
NONE
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
rotate: none;
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>none</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
NUMBER
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
rotate: 1 1 1 45deg;
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>number</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
X
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
rotate: x 45deg;
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>x</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
Y
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
rotate: y 45deg;
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>y</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
Z
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
rotate: z 45deg;
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
</head>
<body>
<p>z</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
.cube {
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face {
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left {
background-color: rgba(255, 0, 0, 0.5);
rotate: y -90deg;
translate: -50px;
}
.right {
background-color: rgba(255, 255, 0, 0.5);
rotate: y 90deg;
translate: 50px;
}
.bottom {
background-color: rgba(0, 255, 0, 0.5);
rotate: x -90deg;
translate: 0 50px;
}
.top {
background-color: rgba(0, 255, 255, 0.5);
rotate: x 90deg;
translate: 0 -50px;
}
.front {
background-color: rgba(0, 0, 255, 0.5);
translate: 0 0 50px;
}
.back {
background-color: rgba(255, 0, 255, 0.5);
rotate: y 180deg;
translate: 0 0 -50px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByClassName("front")[0].style.rotate = value;
}
</script>
</head>
<body>
<button onmouseover="mouseover(value)" value="180deg">angle</button>
<input onmouseover="mouseover(value)" type="button" value="none">
<button onmouseover="mouseover(value)" value="1 1 1 45deg">number</button>
<button onmouseover="mouseover(value)" value="x 45deg">x</button>
<button onmouseover="mouseover(value)" value="y 45deg">y</button>
<button onmouseover="mouseover(value)" value="z 45deg">z</button>
<p>rotate</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
LINKS
INTERNAL
EXTERNAL