css transform

section {
    background: #aaf;
    height: 150px;
    margin: 20px 0px;
    border: 2px dashed #555;
}
 
div {
    background: #ffa;
    width: 100px;
    height: 100px;
    margin: 10px 10px;
    padding: 10px;
    border: 2px dashed #555;
}
 
 
.rotate {
    -webkit-transform: rotate(30deg); /* safari and chrome */
    -moz-transform: rotate(30deg); /* firefox */
    -o-transform: rotate(30deg); /* opera */
    -ms-transform: rotate(30deg); /* ie9 */
    transform: rotate(30deg);
}
 
.translate {
    -webkit-transform: translate(50px,30px); /* safari and chrome */
    -moz-transform: translate(50px,30px); /* firefox */
    -o-transform: translate(50px,30px); /* opera */
    -ms-transform: translate(50px,30px); /* ie9 */
    transform: translate(50px,30px);
}
 
.scale {
    -webkit-transform: scale(1.3,0.6); /* safari and chrome */
    -moz-transform: scale(1.3,0.6); /* firefox */
    -o-transform: scale(1.3,0.6); /* opera */
    -ms-transform: scale(1.3,0.6); /* ie9 */
    transform: scale(1.3,0.6);
}
 
.skew {
    -webkit-transform: skew(20deg,15deg); /* safari and chrome */
    -moz-transform: skew(20deg,15deg); /* firefox */
    -o-transform: skew(20deg,15deg); /* opera */
    -ms-transform: skew(20deg,15deg); /* ie9 */
    transform: skew(20deg,15deg);
}
 
.matrix { /* combination of rotate, translate, scale, skew */
    -webkit-transform: matrix(0.967,-0.351,0.643,0.629,187.281,15.766); /* safari and chrome */
    -moz-transform: matrix(0.967,-0.351,0.643,0.629,187.281px,15.766px); /* firefox */
    -o-transform: matrix(0.967,-0.351,0.643,0.629,187.281,15.766); /* opera */
    -ms-transform: matrix(0.967,-0.351,0.643,0.629,187.281,15.766); /* ie9 */
    transform: matrix(0.967,-0.351,0.643,0.629,187.281,15.766);
}
 
.rotate3d {
    -webkit-transform: rotate3d(0,0,1,50deg); /* safari and chrome */
    -moz-transform: rotate3d(0,0,1,50deg); /* firefox */
    -o-transform: rotate3d(0,0,1,50deg); /* opera */
    -ms-transform: rotate3d(0,0,1,50deg); /* ie9 */
    transform: rotate3d(0,0,1,50deg);
}
 
.scale3d {
    -webkit-transform: scale3d(1.5,1,1); /* safari and chrome */
    -moz-transform: scale3d(1.5,1,1); /* firefox */
    -o-transform: scale3d(1.5,1,1); /* opera */
    -ms-transform: scale3d(1.5,1,1); /* ie9 */
    transform: scale3d(1.5,1,1);
}
 
.translate3d {
    -webkit-transform: translate3d(50,30,40); /* safari and chrome */
    -moz-transform: translate3d(50px,30px,40px); /* firefox */
    -o-transform: translate3d(50,30,40); /* opera */
    -ms-transform: translate3d(50,30,40); /* ie9 */
    transform: translate3d(50,30,40);
}
 
.perspective {
    -webkit-transform: perspective( 300 ) rotateY( 30deg ); /* safari and chrome */
    -moz-transform: perspective( 300px ) rotateY( 30deg ); /* firefox */
    -o-transform: perspective( 300 ) rotateY( 30deg ); /* opera */
    -ms-transform: perspective( 300 ) rotateY( 30deg ); /* ie9 */
    transform: perspective( 300 ) rotateY( 30deg );
}
 
.matrix3d {
    -webkit-transform: matrix3d(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5); /* safari and chrome */
    -moz-transform: matrix3d(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5); /* firefox */
    -o-transform: matrix3d(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5); /* opera */
    -ms-transform: matrix3d(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5); /* ie9 */
    transform: matrix3d(0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5);
}

<section>
    <div class="rotate">rotate(angle)</div>
</section>
<section>
    <div class="translate">translate(x,y)</div>
</section>
<section>
    <div class="scale">scale(x,y)</div>
</section>
<section>
    <div class="skew">skew(x-angle,y-angle)</div>
</section>
<section>
    <div class="matrix">matrix(n,n,n,n,n,n)</div>
</section>
 
<h1>3d:</h1>
 
<section>
    <div class="rotate3d">rotate3d(x,y,z,angle)</div>
</section>
<section>
    <div class="translate3d">translate3d(x, y, z)</div>
</section>
<section>
    <div class="scale3d">scale3d(x,y,z)</div>
</section>
<section>
    <div class="perspective">perspective(val)</div>
</section>
<section>
    <div class="matrix3d">matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</div>
</section>