Cara transformasi sebuah element menggunakan CSS

Cara memutar sebuah element menggunakan css memerlukan property transform. Property transform dapat juga untuk scale, move, skew. penggunaan property transform pada tiap browser berbeda namum secara umum penulisan transform sebagai berikut : div { -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg); }

• none yang berarti tidak ada transformasi
• matrix(n,n,n,n,n,n)  yang berarti transformasi 2 dimensi dengan menggunakan matrix 2 x 3
• matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) yang berarti transformasi 3D dengan menggunakan matrix 4x4
• translate(x,y) yang berarti perpindahan 2 D
• translate3d(x,y,z) yang berarti perpindahan 3 D
• translateX(x) yang berarti perpindahan hanya pada sumbu X
• translateY(y) yang berarti perpindahan hanya pada sumbu Y
• translateZ(z) yang berarti perpindahan hanya pada sumbu Z
• scale(x,y) yang berarti memperbesar atau memperkecil pada 2 D
• scale3d(x,y,z) yang berarti memperbesar atau memperkecil pada 3 D
• scaleX(x) yang berarti memperbesar atau memperkecil hanya pada sumbu X
• scaleY(y) yang berarti memperbesar atau memperkecil hanya pada sumbu Y
• scaleZ(z) yang berarti memperbesar atau memperkecil hanya pada sumbu Z
• rotate(angle) yang berarti memutar object pada 2D
• rotate3d(x,y,z,angle) yang berarti memutar object pada 2D
• rotateX(angle) yang berarti memutar object hanya pada sumbu X
• rotateY(angle) yang berarti memutar object hanya pada sumbu Y
• rotateZ(angle) yang berarti memutar object hanya pada sumbu Z
• skew(x-angle,y-angle) yang berarti skew sepanjang sumbu X dan sumbu Y pada 2D
• skewX(angle) yang berarti skew hanya pada sumbu X
• skewY(angle) yang berarti skew hanya pada sumbu X
• perspective(n) yang berarti perubahan sudut pandang pada 3D