CSS transform Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Base styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, #f6f9ff 0%, #eef6ff 100%);
  margin: 40px;
  display: flex;
  justify-content: center;
}

/* Container */
.wrap {
  max-width: 760px;
  width: 100%;
  text-align: center;
}

/* Grid of examples */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

/* Cards */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 12px;
  box-shadow: 0 6px 18px rgba(30, 44, 61, 0.08);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms;
  transform-origin: center;
}

.card:hover {
  box-shadow: 0 18px 30px rgba(30, 44, 61, 0.12);
}

/* Transform examples */
.translate:hover {
  /* move right and up */
  transform: translate(14px, -10px);
}

.rotate:hover {
  /* rotate around center */
  transform: rotate(-12deg);
}

.scale:hover {
  /* scale up slightly */
  transform: scale(1.08);
}

.skew:hover {
  /* skew on the X axis */
  transform: skewX(12deg);
}

.note {
  margin-top: 16px;
  color: #4a5568;
  font-size: 14px;
}</style></head><body><div class="wrap">
  <h2>CSS Transform examples</h2>
  <div class="grid">
    <div class="card translate">Translate</div>
    <div class="card rotate">Rotate</div>
    <div class="card scale">Scale</div>
    <div class="card skew">Skew</div>
  </div>
  <p class="note">Hover each card to see transform</p>
</div></body></html>