CSS 2D Transforms

/* CSS 2D Transforms */

/* Translate - Move element */
.translate {
  transform: translate(50px, 100px);
}

.translateX {
  transform: translateX(50px);
}

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

/* Rotate - Rotate element */
.rotate {
  transform: rotate(30deg);
}

.rotate-negative {
  transform: rotate(-30deg);
}

/* Scale - Resize element */
.scale {
  transform: scale(1.5, 1.5);
}

.scaleX {
  transform: scaleX(1.5);
}

.scaleY {
  transform: scaleY(1.5);
}

/* Skew - Distort element */
.skew {
  transform: skew(20deg, 10deg);
}

.skewX {
  transform: skewX(20deg);
}

.skewY {
  transform: skewY(10deg);
}

/* Matrix - Combine transforms */
.matrix {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

/* Multiple transforms */
.multiple {
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

/* Transform origin */
.origin-center {
  transform-origin: center;
  transform: rotate(45deg);
}

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

.origin-custom {
  transform-origin: 20% 40%;
  transform: rotate(45deg);
}

/* Transition effects */
.transition {
  transition: transform 0.3s ease;
}

.transition:hover {
  transform: scale(1.1);
}

/* 3D transforms (for comparison) */
.transform-3d {
  transform: perspective(500px) rotateY(45deg);
}

/* Chaining transforms */
.chained {
  transform: translateX(50px) rotate(45deg) translateY(100px);
}

/* Using transforms with positioning */
.absolute-transformed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Transform with animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 1s infinite;
}

/* Transform with filters */
.filter-transform {
  filter: grayscale(50%);
  transform: scale(1.1);
}

/* Transform in flex/grid layouts */
.layout-transforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.layout-transforms > div {
  transition: transform 0.3s ease;
}

.layout-transforms > div:hover {
  transform: translateY(-10px);
}

/* Button transforms */
.btn-transform {
  transition: all 0.3s ease;
}

.btn-transform:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Card flip effect */
.card {
  perspective: 1000px;
}

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

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

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

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

/* Image gallery transforms */
.gallery-item {
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.05) rotate(2deg);
  z-index: 2;
}

/* Menu transform effects */
.menu-item {
  transition: transform 0.3s ease;
}

.menu-item:hover {
  transform: translateX(10px);
}

/* Transform with will-change for performance */
.will-change {
  will-change: transform;
  transition: transform 0.3s ease;
}

/* Responsive transforms */
@media (max-width: 768px) {
  .responsive-transform {
    transform: scale(0.9);
  }
}

/* Transform with gradients */
.gradient-transform {
  background: linear-gradient(45deg, #3498db, #9b59b6);
  transform: skewX(-5deg);
}

/* Transform with borders */
.border-transform {
  border: 2px solid #3498db;
  transform: rotate(5deg);
}

/* Transform with shadows */
.shadow-transform {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* Nested transforms */
.parent {
  transform: rotate(10deg);
}

.child {
  transform: rotate(-10deg);
}

/* Transform with clip-path */
.clip-transform {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: scale(1.1);
}

/* Transform with masks */
.mask-transform {
  mask: linear-gradient(black, transparent);
  transform: skewY(-5deg);
}

/* Transform with blend modes */
.blend-transform {
  mix-blend-mode: multiply;
  transform: rotate(5deg);
}

/* Transform with CSS variables */
:root {
  --rotate: 45deg;
  --scale: 1.2;
}

.variable-transform {
  transform: rotate(var(--rotate)) scale(var(--scale));
}

/* Transform with relative units */
.relative-transform {
  transform: translate(5%, 10%);
}

/* Transform with calc() */
.calc-transform {
  transform: translate(calc(50% - 25px), calc(100% - 50px));
}

/* Transform with viewport units */
.viewport-transform {
  transform: translate(10vw, 20vh);
}

/* Transform with em units */
.em-transform {
  transform: translate(2em, 1em);
}

/* Transform with rem units */
.rem-transform {
  transform: translate(2rem, 1rem);
}

/* Print styles for transforms */
@media print {
  .print-transform {
    transform: none !important;
  }
}

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

/* High contrast support */
@media (prefers-contrast: high) {
  .contrast-transform {
    transform: scale(1.1);
  }
}

/* Dark mode transforms */
@media (prefers-color-scheme: dark) {
  .dark-transform {
    transform: scale(1.05);
  }
}

/* Transform performance optimization */
.performance-transform {
  transform: translateZ(0);
  backface-visibility: hidden;
}