CSS 3D Transforms

Create immersive 3D experiences with CSS 3D Transform properties

What are CSS 3D Transforms?

CSS 3D Transforms allow you to manipulate elements in three-dimensional space. Unlike 2D transforms that work on the X and Y axes, 3D transforms add the Z-axis, enabling depth perception and creating immersive visual effects.

Key 3D Transform Concepts:

  • perspective - Creates depth perception for 3D transformations
  • transform-style: preserve-3d - Maintains 3D positioning of child elements
  • translate3d() - Moves element in 3D space
  • rotate3d() - Rotates element in 3D space
  • scale3d() - Scales element in 3D space
  • matrix3d() - Combines transforms using a 4x4 matrix
  • backface-visibility - Controls visibility of element backfaces

CSS 3D Transforms Reference

Property/FunctionDescriptionValues
perspectiveSets the perspective for 3D transformationslength | none
perspective-originSets the origin point for perspectivex-position y-position
transform-styleSets how child elements are positioned in 3D spaceflat | preserve-3d
backface-visibilityControls visibility of element backfacesvisible | hidden
translate3d()Moves element in 3D spacetranslate3d(tx, ty, tz)
translateZ()Moves element along the Z-axistranslateZ(tz)
rotate3d()Rotates element in 3D spacerotate3d(x, y, z, angle)
rotateX()Rotates element around X-axisrotateX(angle)
rotateY()Rotates element around Y-axisrotateY(angle)
rotateZ()Rotates element around Z-axisrotateZ(angle)
scale3d()Scales element in 3D spacescale3d(sx, sy, sz)
scaleZ()Scales element along Z-axisscaleZ(sz)
matrix3d()Combines transforms using a 4x4 matrixmatrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

CSS 3D Transforms in Action

Example Code

/* CSS 3D Transforms */

/* Basic 3D Transform Properties */
.container-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* 3D Translate - Move element in 3D space */
.translate-3d {
  transform: translate3d(50px, 100px, 50px);
}

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

/* 3D Rotate - Rotate element in 3D space */
.rotate-3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

.rotateX {
  transform: rotateX(45deg);
}

.rotateY {
  transform: rotateY(45deg);
}

.rotateZ {
  transform: rotateZ(45deg);
}

/* 3D Scale - Resize element in 3D space */
.scale-3d {
  transform: scale3d(1.5, 1.5, 1.5);
}

.scaleZ {
  transform: scaleZ(1.5);
}

/* Matrix3D - Combine 3D transforms */
.matrix-3d {
  transform: matrix3d(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 100, 1
  );
}

/* Perspective */
.perspective {
  perspective: 500px;
}

.perspective-origin {
  perspective-origin: 20% 30%;
}

/* Transform Style */
.preserve-3d {
  transform-style: preserve-3d;
}

.flat-3d {
  transform-style: flat;
}

/* Backface Visibility */
.backface-visible {
  backface-visibility: visible;
}

.backface-hidden {
  backface-visibility: hidden;
}

/* Multiple 3D transforms */
.multiple-3d {
  transform: translateZ(100px) rotateY(45deg) scale3d(1.2, 1.2, 1.2);
}

/* 3D Transform origin */
.origin-3d-center {
  transform-origin: center;
  transform: rotateY(45deg);
}

.origin-3d-custom {
  transform-origin: 20% 40% 50px;
  transform: rotateX(45deg);
}

/* 3D Transition effects */
.transition-3d {
  transition: transform 0.5s ease;
}

.transition-3d:hover {
  transform: rotateY(180deg);
}

/* 3D Card flip effect */
.card-3d {
  perspective: 1000px;
}

.card-inner-3d {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-3d:hover .card-inner-3d {
  transform: rotateY(180deg);
}

.card-front-3d, .card-back-3d {
  backface-visibility: hidden;
}

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

/* 3D Cube */
.cube {
  perspective: 1000px;
  transform-style: preserve-3d;
}

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

.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); }

/* 3D Carousel */
.carousel-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.carousel-item {
  transform: rotateY(calc(var(--item-angle) * 1deg)) translateZ(250px);
}

/* 3D Gallery */
.gallery-3d {
  perspective: 1000px;
}

.gallery-item-3d {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.gallery-item-3d:hover {
  transform: translateZ(50px) rotateY(10deg);
}

/* 3D Button effects */
.btn-3d {
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}

.btn-3d:hover {
  transform: translateZ(10px) rotateX(5deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 3D Text effects */
.text-3d {
  transform: translateZ(20px);
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9;
}

/* 3D Depth with shadows */
.depth-3d {
  transform: translateZ(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 3D Animation */
@keyframes spin-3d {
  from {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.spin-3d {
  animation: spin-3d 2s linear infinite;
}

@keyframes float-3d {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -20px, 20px);
  }
}

.float-3d {
  animation: float-3d 3s ease-in-out infinite;
}

/* 3D Parallax effect */
.parallax-container {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-base {
  transform: translateZ(0);
}

.parallax-front {
  transform: translateZ(1px) scale(0.5);
}

/* 3D Scene with multiple objects */
.scene-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.object-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.object-1 { transform: translate3d(-100px, 0, 100px) rotateY(45deg); }
.object-2 { transform: translate3d(0, 0, 200px) rotateX(30deg); }
.object-3 { transform: translate3d(100px, 0, 150px) rotateZ(15deg); }

/* 3D Navigation */
.nav-3d {
  perspective: 1000px;
}

.nav-item-3d {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.nav-item-3d:hover {
  transform: translateZ(20px) rotateX(5deg);
}

/* 3D Modal/popup */
.modal-3d {
  perspective: 1000px;
}

.modal-content-3d {
  transform: rotateX(10deg) translateZ(50px);
  transition: transform 0.5s ease;
}

.modal-3d.open .modal-content-3d {
  transform: rotateX(0) translateZ(0);
}

/* 3D Image hover effects */
.img-3d {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.img-3d:hover {
  transform: rotateY(15deg) translateZ(20px);
}

/* 3D Loading spinner */
.spinner-3d {
  animation: spin-3d 1s linear infinite;
  transform-style: preserve-3d;
}

/* 3D Transform with filters */
.filter-3d {
  filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.3));
  transform: rotateY(15deg) translateZ(20px);
}

/* 3D Transform with blend modes */
.blend-3d {
  mix-blend-mode: multiply;
  transform: rotateX(5deg) translateZ(10px);
}

/* 3D Transform with clip-path */
.clip-3d {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: rotateY(30deg) translateZ(30px);
}

/* 3D Transform with CSS variables */
:root {
  --rotate-x: 45deg;
  --rotate-y: 30deg;
  --translate-z: 50px;
}

.variable-3d {
  transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translateZ(var(--translate-z));
}

/* 3D Transform performance optimization */
.performance-3d {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Reduced motion support for 3D */
@media (prefers-reduced-motion: reduce) {
  .motion-3d {
    transform: none;
    animation: none;
    transition: none;
  }
}

/* 3D Transform with responsive design */
@media (max-width: 768px) {
  .responsive-3d {
    perspective: 500px;
    transform: scale(0.8) rotateY(10deg);
  }
}

/* 3D Transform for dark mode */
@media (prefers-color-scheme: dark) {
  .dark-3d {
    transform: translateZ(10px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
  }
}

/* 3D Transform with gradients */
.gradient-3d {
  background: linear-gradient(45deg, #3498db, #9b59b6);
  transform: rotateX(10deg) rotateY(5deg) translateZ(20px);
}

/* 3D Transform with borders */
.border-3d {
  border: 2px solid #3498db;
  transform: rotateY(15deg) translateZ(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Nested 3D transforms */
.parent-3d {
  transform: rotateY(30deg);
  transform-style: preserve-3d;
}

.child-3d {
  transform: rotateX(15deg) translateZ(50px);
}

/* 3D Transform with masks */
.mask-3d {
  mask: linear-gradient(black, transparent);
  transform: rotateY(10deg) translateZ(20px);
}

/* 3D Transform for print */
@media print {
  .print-3d {
    transform: none !important;
  }
}

3D Transform Techniques

3D Perspective

Creating depth perception for 3D transformations.

3D Rotation

Rotating elements around X, Y, and Z axes.

3D Translation

Moving elements along the Z-axis for depth effects.

3D Card Flip

Creating interactive 3D card flip animations.

Best Practices for 3D Transforms

Effective Usage

  • Use perspective to create depth perception
  • Set transform-style: preserve-3d for nested 3D elements
  • Use backface-visibility: hidden for card flip effects
  • Combine with transitions for smooth 3D animations
  • Use will-change for performance optimization
  • Test across different browsers and devices

Common Mistakes to Avoid

  • Forgetting to set perspective for 3D effects
  • Not using transform-style: preserve-3d for nested 3D
  • Overusing complex 3D transforms unnecessarily
  • Ignoring performance on low-powered devices
  • Not testing with reduced motion preferences
  • Forgetting browser prefix support for older browsers

Browser Support & Accessibility

  • CSS 3D Transforms are supported in all modern browsers
  • Use feature queries (@supports) for progressive enhancement
  • Consider reduced motion preferences with media queries
  • Ensure 3D content remains accessible and usable
  • Test with screen readers when content is visually transformed
  • Provide fallbacks for older browsers when necessary

Ready to Try It Yourself?

Experiment with CSS 3D Transforms in our interactive editor. See your changes in real-time and build your understanding through practice.

< PreviousNext >