/* Basic 3D translate */
.translate-3d {
  transform: translate3d(50px, 20px, 30px);
  /* Moves 50px right, 20px down, 30px toward viewer */
}

/* Rotate around X axis (pitch) */
.rotate-x {
  transform: rotateX(45deg);
  /* Tips top toward viewer */
}

/* Rotate around Y axis (yaw) */
.rotate-y {
  transform: rotateY(45deg);
  /* Tilts right toward viewer */
}

/* Rotate around Z axis (roll - like 2D rotate) */
.rotate-z {
  transform: rotateZ(45deg);
  /* Spins in place */
}

/* Rotate around arbitrary 3D axis */
.rotate-3d-axis {
  transform: rotate3d(1, 1, 0, 45deg);
  /* Rotate 45deg around (1,1,0) vector */
}

/* 3D scale */
.scale-3d {
  transform: scale3d(1.5, 1.5, 2);
  /* Larger X and Y, even larger on Z-axis */
}

/* Scale just Z-axis */
.scale-z {
  transform: scaleZ(1.5);
  /* Affects apparent depth with perspective */
}

/* Perspective creates 3D effect */
.perspective-container {
  perspective: 1000px;
  /* Closer = more extreme 3D effect */
}

.perspective-item {
  transform: rotateY(30deg);
  /* Parent perspective affects child depth */
}

/* Different perspective distances */
.shallow {
  perspective: 2000px;
  /* Far away viewer, subtle depth */
}

.normal {
  perspective: 1000px;
  /* Medium distance, realistic depth */
}

.extreme {
  perspective: 500px;
  /* Close viewer, exaggerated 3D */
}

/* Perspective origin (viewer position) */
.perspective-origin-left {
  perspective: 1000px;
  perspective-origin: left center;
  /* Viewer on the left side */
}

.perspective-origin-top {
  perspective: 1000px;
  perspective-origin: center top;
  /* Viewer above */
}

/* Self perspective (element has its own perspective) */
.self-perspective {
  transform-style: preserve-3d;
  perspective: 1000px;
  /* Element applies perspective to itself */
}

/* Child depth relative to parent perspective */
.parent {
  perspective: 1000px;
}

.child {
  transform: translateZ(100px);
  /* Child appears closer to viewer */
}

.child-back {
  transform: translateZ(-100px);
  /* Child appears farther from viewer */
}

/* Important: preserve-3d for nested 3D elements */

/* Flat (default): children 2D in parent's plane */
.flat-container {
  transform: rotateX(30deg);
  transform-style: flat;
}

.flat-child {
  transform: rotateY(45deg);
  /* Child rotates in parent's plane, not true 3D */
}

/* Preserve-3d: children maintain 3D depth */
.preserve-3d-container {
  transform: rotateX(30deg);
  transform-style: preserve-3d;
}

.preserve-3d-child {
  transform: rotateY(45deg);
  /* Child rotates in true 3D space */
}

/* Building a 3D cube with preserve-3d */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(45deg);
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  transform: translateZ(100px);
  background: rgba(52, 152, 219, 0.8);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
  background: rgba(46, 204, 113, 0.8);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
  background: rgba(155, 89, 182, 0.8);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
  background: rgba(230, 126, 34, 0.8);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
  background: rgba(231, 76, 60, 0.8);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: rgba(52, 73, 94, 0.8);
}

/* Flipping card effect */
.flip-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-front {
  background: #3498db;
  color: white;
}

.flip-back {
  background: #e74c3c;
  color: white;
  transform: rotateY(180deg);
}

/* 3D carousel */
.carousel-container {
  perspective: 1000px;
  width: 400px;
  height: 400px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s ease;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Position 6 items in circle */
.item-0 { transform: rotateY(0deg) translateZ(200px); background: #3498db; }
.item-1 { transform: rotateY(60deg) translateZ(200px); background: #e74c3c; }
.item-2 { transform: rotateY(120deg) translateZ(200px); background: #2ecc71; }
.item-3 { transform: rotateY(180deg) translateZ(200px); background: #f39c12; }
.item-4 { transform: rotateY(240deg) translateZ(200px); background: #9b59b6; }
.item-5 { transform: rotateY(300deg) translateZ(200px); background: #1abc9c; }

/* 3D parallax scrolling */
.parallax-container {
  perspective: 1000px;
  overflow: hidden;
}

.parallax-layer {
  transform: translateZ(0px);
  transition: transform 0.3s ease;
}

.parallax-layer-1 {
  transform: translateZ(-50px) scale(1.05);
}

.parallax-layer-2 {
  transform: translateZ(-100px) scale(1.1);
}

/* Spinning cube animation */
@keyframes spin-cube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

.spinning-cube {
  animation: spin-cube 10s linear infinite;
  transform-style: preserve-3d;
}

/* Floating in 3D space */
@keyframes float-3d {
  0% {
    transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateZ(50px) rotateX(15deg) rotateY(15deg);
  }
  100% {
    transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
  }
}

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

/* Flip and flip back */
@keyframes flip-animation {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

.flip-element {
  animation: flip-animation 2s ease-in-out infinite;
}

/* Tilt on mouse move (requires JavaScript) */
.tilt-element {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

/* Depth fade with Z position */
.depth-element {
  animation: move-depth 3s ease-in-out infinite;
}

@keyframes move-depth {
  0% { transform: translateZ(-100px); opacity: 0.5; }
  50% { transform: translateZ(0px); opacity: 1; }
  100% { transform: translateZ(-100px); opacity: 0.5; }
}

/* 3D transforms use GPU acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  /* Forces hardware acceleration */
}

/* Use will-change for animated 3D */
.animated-3d {
  will-change: transform;
  animation: rotate-3d 3s infinite;
}

/* Optimize: use translateZ(0) to hint GPU */
.optimized {
  transform: rotateY(45deg) translateZ(0);
  /* translateZ(0) forces GPU without visual change */
}

/* Browser support is very good for 3D transforms */
.supported {
  transform: rotateX(45deg) rotateY(30deg);
  /* Works in all modern browsers */
}

/* Use -webkit prefix for older webkit browsers */
.prefixed {
  -webkit-perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(45deg);
  perspective: 1000px;
  transform-style: preserve-3d;
  transform: rotateY(45deg);
}

/* Test 3D support */
@supports (transform: rotateY(1deg)) {
  .has-3d-support {
    transform: rotateY(45deg);
  }
}

@supports not (transform: rotateY(1deg)) {
  .fallback-2d {
    transform: rotate(45deg);
  }
}