CSS Transforms

Explore 2D and 3D transformations in CSS

Introduction to CSS Transforms

CSS transforms allow you to modify elements in two-dimensional or three-dimensional space. You can rotate, scale, move, skew, and apply perspective to elements, creating dynamic and interactive visual effects.

.element {
  transform: function(value);
}
                    

The transform property accepts various functions that define the transformation to be applied. Hover over the examples below to see the transforms in action.

2D Transforms

2D transforms manipulate elements in a two-dimensional space (X and Y axes).

Hover

translate(20px, 20px)

Hover

translateX(20px)

Hover

translateY(20px)

Hover

scale(1.5)

Hover

scaleX(1.5)

Hover

scaleY(1.5)

Hover

rotate(45deg)

Hover

skew(20deg, 10deg)

Hover

skewX(20deg)

Hover

skewY(10deg)

Hover

matrix(1, 0.2, 0.2, 1, 20, 20)

/* Translation */
.translate { transform: translate(20px, 20px); }
.translateX { transform: translateX(20px); }
.translateY { transform: translateY(20px); }

/* Scaling */
.scale { transform: scale(1.5); }
.scaleX { transform: scaleX(1.5); }
.scaleY { transform: scaleY(1.5); }

/* Rotation */
.rotate { transform: rotate(45deg); }

/* Skewing */
.skew { transform: skew(20deg, 10deg); }
.skewX { transform: skewX(20deg); }
.skewY { transform: skewY(10deg); }

/* Matrix (combines multiple transforms) */
.matrix { transform: matrix(1, 0.2, 0.2, 1, 20, 20); }
                    

3D Transforms

3D transforms allow you to manipulate elements in three-dimensional space (X, Y, and Z axes). The perspective property is often used to create a sense of depth.

Hover

rotateX(45deg)

Hover

rotateY(45deg)

Hover

rotateZ(45deg)

Hover

translate3d(20px, 20px, 50px)

Hover

scale3d(1.5, 1.5, 2)

.perspective-container {
  perspective: 500px; /* Creates depth perception */
}

/* 3D Rotations */
.rotateX { transform: rotateX(45deg); }
.rotateY { transform: rotateY(45deg); }
.rotateZ { transform: rotateZ(45deg); }

/* 3D Translation */
.translate3d { transform: translate3d(20px, 20px, 50px); }

/* 3D Scaling */
.scale3d { transform: scale3d(1.5, 1.5, 2); }
                    

Multiple Transforms

You can combine multiple transform functions in a single transform property. The transformations are applied in the order they are listed.

Hover

rotate(45deg) scale(1.2) translateX(20px)

.multiple {
  transform: rotate(45deg) scale(1.2) translateX(20px);
}
                    

Transform Origin

The transform-origin property allows you to change the point of origin for transformations. By default, transformations are applied from the center of the element.

Top Left

Center (Default)

Bottom Right

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

.origin-center {
  transform-origin: center; /* This is the default */
  transform: rotate(45deg);
}

.origin-bottom-right {
  transform-origin: bottom right;
  transform: rotate(45deg);
}
                    

3D Card Flip Effect

A popular use of 3D transforms is to create a card flip effect. Hover over the card below to see it in action.

Front Side

Back Side

.card-container {
  width: 200px;
  height: 250px;
  perspective: 1000px; /* Adds depth */
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Preserves 3D positioning of children */
  transition: transform 0.8s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back face when rotated */
}

.card-back {
  transform: rotateY(180deg);
}
                    

3D Cube

Using 3D transforms, you can create complex three-dimensional objects like this cube. Hover over it to see it rotate.

Front

Back

Right

Left

Top

Bottom

.cube-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  transition: transform 1s;
}

.cube:hover {
  transform: rotateX(-20deg) rotateY(210deg);
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
}

.cube-front { transform: translateZ(100px); }
.cube-back { transform: rotateY(180deg) translateZ(100px); }
.cube-right { transform: rotateY(90deg) translateZ(100px); }
.cube-left { transform: rotateY(-90deg) translateZ(100px); }
.cube-top { transform: rotateX(90deg) translateZ(100px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(100px); }
                    

Practical Example: Hover Card

Transforms are commonly used to create interactive UI elements. Hover over the card below to see multiple transforms in action.

.hover-card {
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.hover-card-title {
  transition: transform 0.3s ease;
}

.hover-card:hover .hover-card-title {
  transform: scale(1.1);
}
                    

Menu

CSS Transforms

Introduction to CSS Transforms

2D Transforms

3D Transforms

Multiple Transforms

Transform Origin

Top Left

Center (Default)

Bottom Right

3D Card Flip Effect

Front Side

Back Side

3D Cube

Practical Example: Hover Card

Hover Card Example