Effects & Animation

Transforms

Transforms move, rotate, scale or skew an element without affecting the layout around it.

.card:hover { transform: translateY(-6px); }
.icon:hover { transform: rotate(15deg); }
.thumbnail:hover img { transform: scale(1.08); }
.tilted { transform: rotate(-3deg) scale(0.95); }

Function	Example
`translate(x, y)`	`translate(10px, -5px)`
`scale(n)`	`scale(1.1)`
`rotate(deg)`	`rotate(45deg)`
`skew(deg)`	`skewX(10deg)`