<!-- rotate: spin element clockwise -->
.element {
  transform: rotate(45deg);
  /* Spin 45 degrees clockwise */
}

<!-- Element rotates around its center -->

/* Negative values: counterclockwise -->
.element {
  transform: rotate(-45deg);
  /* Spin 45 degrees counterclockwise */
}

/* Full rotation: 360deg */
.element {
  transform: rotate(360deg);
  /* Back to original position -->
}

/* Other angle units -->
.element {
  transform: rotate(0.5turn);     /* half rotation -->
  transform: rotate(2rad);        /* radians -->
  transform: rotate(200grad);     /* gradians -->
}

/* All equivalent: 180 degrees -->

/* Single axis: rotateX, rotateY, rotateZ -->
.element {
  transform: rotateX(45deg);  /* rotate around X axis -->
}

.element {
  transform: rotateY(45deg);  /* rotate around Y axis -->
}

.element {
  transform: rotateZ(45deg);  /* rotate around Z axis -->
}

<!-- rotateZ is same as rotate -->

<!-- Loading spinner -->
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<!-- Continuous rotation -->

/* Icon rotation on hover -->
.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(180deg);
}

<!-- Icon flips upside down on hover -->

/* Arrow rotation for toggle -->
.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
  /* Points down when open -->
}

<!-- Direction changes with state -->

/* Card flip 3D effect -->
.card {
  perspective: 1000px;
  transition: transform 0.6s;
}

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

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

<!-- Card flips to show back -->

/* Decorative rotation -->
.decoration {
  animation: spin-slow 10s linear infinite;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

<!-- Slow continuous rotation -->

<!-- 3D rotation requires perspective -->
.container {
  perspective: 1000px;
  /* Creates 3D depth space -->
}

.element {
  transform: rotateX(45deg);
  /* Visible 3D rotation -->
}

<!-- Without perspective, rotateX doesn't show -->

/* rotateX: tilt up/down -->
.element {
  perspective: 1000px;
  transform: rotateX(45deg);
  /* Tilts back (away from viewer) -->
}

<!-- Top of element moves away -->

/* rotateY: tilt left/right -->
.element {
  perspective: 1000px;
  transform: rotateY(45deg);
  /* Tilts right (away from viewer) -->
}

<!-- Right side moves away -->

/* Both rotations: tilt multiple directions -->
.card {
  perspective: 1000px;
  transition: transform 0.3s;
}

.card:hover {
  transform: rotateX(10deg) rotateY(10deg);
  /* Tilts both ways -->
}

<!-- Perspective tilt effect -->

/* Transform style: preserve 3D for children -->
.container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card {
  transition: transform 0.6s;
}

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
  /* Hidden initially -->
}

<!-- Card flip showing front/back sides -->

<!-- Default: rotate around center -->
.element {
  transform: rotate(45deg);
  /* Rotates around element center -->
}

<!-- Change rotation center with transform-origin -->
.element {
  transform: rotate(45deg);
  transform-origin: top left;
  /* Rotates around top-left corner -->
}

<!-- Corners rotate differently -->

/* Origin positions -->
.element {
  transform-origin: top;         /* top center -->
  transform-origin: bottom;      /* bottom center -->
  transform-origin: left;        /* middle left -->
  transform-origin: right;       /* middle right -->
  transform-origin: top left;    /* top-left corner -->
  transform-origin: bottom right; /* bottom-right corner -->
}

/* Numeric origin -->
.element {
  transform-origin: 100px 50px;  /* 100px right, 50px down -->
}

.element {
  transform-origin: 50% 50%;     /* percentages work too -->
}

/* Practical: door swing from hinge -->
.door {
  transform-origin: left;
  transition: transform 0.5s;
}

.door.open {
  transform: rotateY(-90deg);
  /* Rotates around left edge -->
}

<!-- Door swings outward -->

/* Compass arrow rotation -->
.arrow {
  transform-origin: center;  /* default -->
  transition: transform 0.3s;
}

.arrow.north {
  transform: rotate(0deg);
}

.arrow.east {
  transform: rotate(90deg);
}

.arrow.south {
  transform: rotate(180deg);
}

.arrow.west {
  transform: rotate(270deg);
}

<!-- Rotate + translate -->
.element {
  transform: translateX(100px) rotate(45deg);
  /* Move right, then rotate -->
}

<!-- Move and spin -->

/* Rotate + scale -->
.element {
  transition: transform 0.3s;
}

.element:hover {
  transform: scale(1.2) rotate(360deg);
  /* Grow and spin -->
}

<!-- Growing rotation -->

/* Chaining transforms */
.element {
  transform: translateY(-50px) rotateZ(45deg) scale(0.8);
  /* Move up, rotate, shrink -->
}

/* Order matters: left to right */
/* Same transform applied sequentially -->

/* Practical: card flip with scale and move -->
.card {
  perspective: 1000px;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card:hover {
  transform: translateY(-20px) rotateY(180deg) scale(1.05);
  /* Lift, flip, and grow -->
}

<!-- Bouncy flip effect -->