CSS3 3D Transforms ® Muaz Khan

@media all and (-webkit-transform-3d) {
	.class-name {
		-webkit-perspective: 1000;
		-webkit-transform-style: preserve-3d;
		-webkit-box-sizing: border-box;

		// -webkit-transform: rotate(-180deg);
		// -webkit-transform: matrix(1, 1, 5,1, 13, -12);
	}
}

-webkit-transform: rotate(-180deg)

CSS3 3D Transforms ® rotate

-webkit-transform: rotateZ(-180deg)

CSS3 3D Transforms ® rotateZ

-webkit-transform: rotateX(-180deg)

CSS3 3D Transforms ® rotateX

-webkit-transform: rotateY(-180deg)

CSS3 3D Transforms ® rotateY

-webkit-transform: rotate(13deg, -12deg); // unit: → deg

-webkit-transform: rotateX(13deg);
-webkit-transform: rotateY(13deg);
-webkit-transform: rotateZ(13deg);

-webkit-transform: rotate3d(13deg, -12deg, 30deg);

-webkit-transform: scale(1.1)

CSS3 3D Transforms ® scale

-webkit-transform: scale(1.1, 0);

-webkit-transform: scaleX(1.2);
-webkit-transform: scaleY(1.3);

-webkit-transform: scale3d(1.1, 0.2, 3);

-webkit-transform: matrix(A, B, C, D, X, Y)

-webkit-transform: matrix(1, 1, 5, 1, 13, -12);

-webkit-transform: translate(X, Y) → units: (%, px, etc)

-webkit-transform: translate(13%, -12px);

-webkit-transform: translateX(13px);
-webkit-transform: translateY(13%);
-webkit-transform: translateZ(13px);

-webkit-transform: translate3d(13%, -12px, 30%);

-webkit-transform: skew(X, Y) → unit: deg

-webkit-transform: skew(13deg, -12deg);

-webkit-transform: skewX(13deg);
-webkit-transform: skewY(13deg);