Transforms move, rotate, scale, and skew elements in hardware-accelerated 2D and 3D space.
1. Core Transform Functions
⊞Code Example
.icon-button:hover svg {
transform: rotate(90deg) scale(1.15);
transition: transform 0.2s ease;
}
/* 3D Card Flip */
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}