transform

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

1transform: scale(sx,sy);

1 background: wheat;
2 max-width: intrinsic;
3
4 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
5      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
6         transform: matrix(1, 0, 0.6, 1,  250, 0);
7

1 background: gold;  width: 30em;
2
3 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
4      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
5         transform: matrix(1, -0.2, 0, 1, 0, 0);
6