css transform 2d and 3d browser support
css:
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);
}
html:
<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>