2D/3D transformation

2D/3D transformations are powerful visual presentation tools in CSS3, allowing developers to control the morphological changes of elements in a plane or space through code. From simple rotations and scaling to complex perspectives and three-dimensional layers, these features bring more possibilities to web design.

Basics of 2D Transformations

2D transformations are achieved using the transform property and include the following commonly used functions:

.box {
  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
}

• Translation (translate): translateX(), translateY(), or the combined translate(). The example below moves the element 50px to the right and 20px down:

  .move { transform: translate(50px, 20px); }
  

• Rotation (rotate): Specifies the angle in degrees (deg). Positive values rotate clockwise:

  .spin { transform: rotate(45deg); }
  

• Scaling (scale): scaleX() adjusts width individually, while scale() controls both width and height. The following example achieves a 1.5x enlargement:

  .enlarge { transform: scale(1.5); }
  

• Skew (skew): Creates a slant effect. The code below produces a 30-degree horizontal skew:

  .slant { transform: skewX(30deg); }
  

Advanced 3D Transformations

Requires the perspective property to establish a three-dimensional space. The parent container sets the viewing distance, and child elements perform transformations:

<div class="scene">
  <div class="cube">3D Element</div>
</div>

.scene {
  perspective: 800px;
}
.cube {
  transform: rotateY(45deg);
}

Core 3D Functions

• Z-axis translation: translateZ() controls depth movement. Positive values move toward the user:

  .pop { transform: translateZ(100px); }
  

• 3D rotation: rotate3d(x, y, z, angle) enables multi-axis rotation:

  .twist {
    transform: rotate3d(1, 1, 0, 60deg);
  }
  

• Perspective origin: perspective-origin changes the vanishing point position:

  .scene {
    perspective-origin: 25% 75%;
  }
  

Combining Transformations and Order

The order of transformation functions affects the final result. Rotating before translating produces a different outcome than translating before rotating:

/* Option A: Rotate then translate */
.demoA {
  transform: rotate(30deg) translateX(100px);
}

/* Option B: Translate then rotate */
.demoB {
  transform: translateX(100px) rotate(30deg);
}

Advanced Control of Transformation Styles

• Transform origin: transform-origin changes the reference point. The example below rotates around the bottom-right corner:

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

• Matrix transformations: matrix() and matrix3d() enable complex mathematical transformations:

  .complex {
    transform: matrix(1, 0.3, 0.2, 1, 50, 20);
  }
  

Performance Optimization Practices

Hardware acceleration techniques can improve animation performance:

.optimized {
  transform: translateZ(0);
  will-change: transform;
}

Avoid frequently modifying the perspective property during transitions; it is recommended to set it statically on the parent element.

Practical Application Examples

Card Flip Effect

<div class="flip-container">
  <div class="flipper">
    <div class="front">Front Content</div>
    <div class="back">Back Content</div>
  </div>
</div>

.flip-container {
  perspective: 1000px;
}
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}

Building a 3D Cube

Combine six faces to form a cube structure:

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

Browser Compatibility Solutions

For older browser versions, prefix handling is required:

.legacy {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Tools like PostCSS can automatically add prefixes. Detect 3D support:

const supports3D = window.CSS.supports('transform-style', 'preserve-3d');

Combining Transformations with Animations

Use @keyframes to create complex animations:

@keyframes spin {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}
.spinner {
  animation: spin 3s infinite linear;
}

Common Issue Troubleshooting

• Element flickering: Add backface-visibility: hidden
• Transform failure: Check if the container has transform-style: preserve-3d set
• Perspective distortion: Adjust the perspective value (typically 500-1200px works best)