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);
} |