1<style>
2div {
3 width: 80px;
4 height: 80px;
5 background-color: skyblue;
6}
7.rotated {
8 transform: rotate(45deg);
9 background-color: pink;
10}
11</style>
12
13/* In body of html doc */
14<div>Normal</div>
15<div class="rotated">Rotated</div>
1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.rotated {
8 transform: rotate(45deg); /* Equal to rotateZ(45deg) */
9 background-color: pink;
10}
11
1transform: matrix(1, 2, 3, 4, 5, 6);
2transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
3transform: translate(120px, 50%);
4transform: scale(2, 0.5);
5transform: rotate(0.5turn);
6transform: skew(30deg, 20deg);
7transform: scale(0.5) translate(-100%, -100%);
8transform: perspective(17px);
9
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div.a {
6 width: 150px;
7 height: 80px;
8 background-color: yellow;
9 -ms-transform: rotate(20deg); /* IE 9 */
10 transform: rotate(20deg);
11}
12
13div.b {
14 width: 150px;
15 height: 80px;
16 background-color: yellow;
17 -ms-transform: skewY(20deg); /* IE 9 */
18 transform: skewY(20deg);
19}
20
21div.c {
22 width: 150px;
23 height: 80px;
24 background-color: yellow;
25 -ms-transform: scaleY(1.5); /* IE 9 */
26 transform: scaleY(1.5);
27}
28</style>
29</head>
30<body>
31
32<h1>The transform Property</h1>
33
34<h2>transform: rotate(20deg):</h2>
35<div class="a">Hello World!</div>
36<br>
37
38<h2>transform: skewY(20deg):</h2>
39<div class="b">Hello World!</div>
40<br>
41
42<h2>transform: scaleY(1.5):</h2>
43<div class="c">Hello World!</div>
44
45</body>
46</html>
1div {
2 width: 80px;
3 height: 80px;
4 background-color: skyblue;
5}
6
7.rotated {
8 transform: rotate(45deg); /* Equal to rotateZ(45deg) */
9 background-color: pink;
10}