Home CSS Reference transform

transform

property CSS3

Applies 2D or 3D transformations. Multiple functions can be chained together.

Syntax

transform: translate() rotate() scale() skew();

Example

css

.translate { transform: translate(50px, 20px); }
.rotate    { transform: rotate(45deg); }
.scale     { transform: scale(1.5); }
.skew      { transform: skewX(20deg); }

/* Center trick */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 3D card flip */
.flip-card:hover .inner {
    transform: rotateY(180deg);
}

@keyframes

cursor