Transforms

Code

/* 2D transform */
.translate { transform: translate(50px, 100px); }
.translateX { transform: translateX(50px); }
.translateY { transform: translateY(50px); }
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.scaleX { transform: scaleX(2); }
.scaleY { transform: scaleY(0.5); }
.skew { transform: skew(20deg, 10deg); }

/* Combined transform */
.combined {
    transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

/* 3D transform */
.rotate3d {
    transform: rotate3d(1, 1, 1, 45deg);
}
.rotateX { transform: rotateX(60deg); }
.rotateY { transform: rotateY(60deg); }
.translateZ { transform: translateZ(100px); }

/* 3D perspective */
.scene {
    perspective: 1000px;
}
.cube {
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg);
}

/* Transform origin */
.origin {
    transform-origin: top left;
    transform: rotate(45deg);
}

/* Flip card */
.flip-card {
    perspective: 1000px;
}
.flip-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}
.flip-front, .flip-back {
    backface-visibility: hidden;
    position: absolute;
}
.flip-back {
    transform: rotateY(180deg);
}

Explanation

transform supports translate/rotate/scale/skew; preserve-3d and perspective achieve 3D effects.

More CSS Snippets