toolsmoah

Transform Generator

Visueel CSS-transformatie-eigenschappen maken en bekijken.

CSS Transform is een krachtige CSS-eigenschap waarmee u web-elementen in 2D- of 3D-ruimte kunt transformeren. Door transformaties zoals translate, rotate, scale en skew kunt u dynamische en interactieve webdesigns maken. Creëer eenvoudig de gewenste effecten met realtime preview.

Transformatie-instellingen
Pas elke transformatie-eigenschap aan
Voorbeeld
Controleer het gegenereerde transformatie-effect
Transform
Gegenereerde CSS
transform: none;
Voorinstellingen
Probeer vooraf gedefinieerde transformatiestijlen
Transformatiefunctie Referentie

Transformatiefuncties

  • • translate(x, y): translate(x, y): Verplaats element met x, y hoeveelheid
  • • scale(x, y): scale(x, y): Schaal element met x, y verhouding
  • • rotate(angle): rotate(hoek): Roteer element met hoek
  • • skew(x, y): skew(x, y): Scheef element met x, y graden

Gebruikstips

  • • Meerdere transformatiefuncties kunnen worden gecombineerd met spaties
  • • Verander transformatie-oorsprong met transform-origin
  • • Gebruik met transition om animatie-effecten te creëren
  • • Gebruik perspective-eigenschap voor 3D-transformaties
📚 Complete CSS Transform Gids
Gedetailleerde gids om CSS Transform onder de knie te krijgen

🎯 Transform Basisconcepten

CSS Transform is een CSS-eigenschap die de vorm, grootte en positie van elementen verandert. Het maakt visuele transformatie van elementen mogelijk zonder de normale documentstroom te verstoren.

Basissyntaxis:

transform: function(value) function(value) ...;

📐 Transformatiefunctie Details

🔄 Translate (Beweging)

  • • translate(x, y): translate(x, y): Beweeg langs X, Y assen
  • • translateX(x): translateX(x): Beweeg alleen langs X-as
  • • translateY(y): translateY(y): Beweeg alleen langs Y-as
  • • translate3d(x, y, z): translate3d(x, y, z): 3D-beweging
transform: translate(50px, 100px);

📏 Scale (Formaat wijzigen)

  • • scale(x, y): scale(x, y): Schaal X, Y assen
  • • scaleX(x): scaleX(x): Schaal alleen X-as
  • • scaleY(y): scaleY(y): Schaal alleen Y-as
  • • Groter dan 1 vergroot, kleiner dan 1 verkleint
transform: scale(1.5, 0.8);

🔄 Rotate (Rotatie)

  • • rotate(angle): rotate(hoek): Roteer rond Z-as
  • • rotateX(angle): rotateX(hoek): Roteer rond X-as
  • • rotateY(angle): rotateY(hoek): Roteer rond Y-as
  • • Gebruik deg, rad, turn eenheden voor hoeken
transform: rotate(45deg);

📐 Skew (Scheefstand)

  • • skew(x, y): skew(x, y): Scheefstand langs X, Y assen
  • • skewX(angle): skewX(hoek): Scheefstand langs X-as
  • • skewY(angle): skewY(hoek): Scheefstand langs Y-as
  • • Transformeer naar parallellogramvorm
transform: skew(15deg, 5deg);

🎨 Transform Origin (Transformatiepunt)

De transform-origin eigenschap stelt het transformatie-oorsprongspunt in. Standaard is dit het midden van het element (50% 50%).

Sleutelwoorden gebruiken

transform-origin: top left;

Percentages gebruiken

transform-origin: 25% 75%;

Pixels gebruiken

transform-origin: 10px 20px;

⚡ Prestatieoptimalisatie Tips

✅ Aanbevelingen

  • • Animeer alleen transform en opacity
  • • Gebruik will-change eigenschap
  • • Gebruik 3D-versnelling (translateZ(0))
  • • Creëer samengestelde lagen voor betere prestaties

❌ Te vermijden

  • • Breedte, hoogte animeren
  • • Posities links, boven animeren
  • • Overmatige transformatie-nesting
  • • Onnodig will-change gebruik

Voorbeeld prestatieoptimalisatie:

.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}

🎬 Animatie en Transities

Transform kan worden gebruikt met CSS Transition en Animation om vloeiende effecten te creëren.

Transitie voorbeeld

.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}

Keyframe Animatie voorbeeld

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }

🌐 Browsercompatibiliteit

CSS Transform wordt ondersteund in alle moderne browsers, maar vendor-prefixes kunnen nodig zijn voor oudere browsers.

Vendor-prefix voorbeeld:

-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */

🎯 Real-world Gebruiksvoorbeelden

Kaart hover-effect

.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}

Laadspinner

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

Modale ingangseffect

.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}

Knop klik-effect

.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}

🔧 Debugging en Ontwikkeltools

Browser Ontwikkelaarstools

  • • Realtime bewerken in Elementenpaneel
  • • Controleer eindwaarden in tabblad Berekend
  • • Prestatieanalyse met Prestatie tabblad
  • • Controleer laagsstructuur met 3D-weergave

Handige CSS-eigenschappen

  • • transform-style: preserve-3d
  • • perspective: 1000px
  • • backface-visibility: hidden
  • • will-change: transform

💡 Pro Tips

Prestatie Tip

Het gebruik van transform3d() of translateZ(0) om samengestelde lagen te creëren voor GPU-versnelling kan de animatieprestaties aanzienlijk verbeteren.

Toegankelijkheid Tip

Gebruik de prefers-reduced-motion media query om alternatieven te bieden voor gebruikers die gevoelig zijn voor beweging.

Ontwerp Tip

Het correct instellen van transform-origin kan natuurlijkere transformatie-effecten creëren.

Ontwikkeling Tip

Het gebruik van CSS-variabelen om transformatiewaarden dynamisch te regelen, maakt JavaScript-integratie eenvoudiger.

    Transform Generator