CSS: transforms

CSS Transforms maken het mogelijk om elementen te verplaatsen, roteren, schalen en vervormen zonder de layout te beïnvloeden. Ze zijn perfect voor animaties.

translate() - Verplaatsen

.element {
    transform: translate(50px, 100px);  /* Rechts 50px, omlaag 100px */
    transform: translateX(50px);        /* Alleen horizontaal */
    transform: translateY(100px);       /* Alleen verticaal */
}

/* Perfect centreren */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

scale() - Grootte aanpassen

.element {
    transform: scale(1.5);      /* 150% groter */
    transform: scale(0.8);      /* 80% kleiner */
    transform: scaleX(2);       /* Dubbel zo breed */
    transform: scaleY(0.5);     /* Half zo hoog */
}

/* Hover zoom effect */
.image:hover {
    transform: scale(1.1);
}

rotate() - Draaien

.element {
    transform: rotate(45deg);    /* 45 graden rechtsom */
    transform: rotate(-90deg);   /* 90 graden linksom */
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

skew() - Scheef trekken

.element {
    transform: skew(15deg, 5deg);   /* Horizontaal en verticaal scheef */
    transform: skewX(20deg);        /* Alleen horizontaal scheef */
}

Transforms Combineren

.combined {
    /* Volgorde is belangrijk! */
    transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

Transform Origin - Draaipunt

.element {
    transform-origin: center;       /* Standaard */
    transform-origin: top left;     /* Draai vanaf hoek */
    transform-origin: bottom;       /* Draai vanaf onderkant */
}