Documentation

Student-friendly HTML, CSS, and JavaScript reference with examples

Sections


                                        :hover


                                        transform:


                                        transition:


                                        filter


                                        pointer-events

The transform property lets you move, rotate, scale, or skew elements.

Scale (make bigger/smaller):

.card:hover {
  transform: scale(1.1);  /* 10% bigger */
}

Translate (move):

.button:hover {
  transform: translateY(-5px);  /* Move up 5px */
}

Rotate:

.icon:hover {
  transform: rotate(15deg);  /* Rotate 15 degrees */
}

Combine multiple transforms:

.card:hover {
  transform: scale(1.05) translateY(-5px);
}

Transforms are perfect for hover effects because they’re smooth and performant!