jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS 3D Transform Generator

Maak CSS 3D-transformaties met een visuele editor waarmee u rotateX, rotateY, rotateZ, scale, translate3d, perspective en transform-origin kunt aanpassen via schuifregelaars.

Tool laden...

Wat is CSS 3D Transform Generator?

De CSS 3D Transform Generator is een visueel hulpmiddel voor het maken van driedimensionale CSS-transformaties zonder handmatig transform-functies te typen.

Snel antwoord

Maak visueel CSS 3D-transformaties door rotateX, rotateY, rotateZ, scale, translate3d, perspective en transform-origin aan te passen. Kopieer de volledige CSS transform-eigenschap.

Last updated: 2026-06-11

Beperkingen

  • Deze tool genereert een enkele-element 3D-transformatie.
  • Het voorbeeld gebruikt een statische 2D-kaart.
  • 3D-transformaties kunnen artefacten veroorzaken op Safari.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Pas de schuifregelaars rotateX, rotateY en rotateZ aan om de voorbeeldkaart in 3D-ruimte te kantelen.
  2. Stel de perspectiefwaarde in. Kleinere waarden (200-400px) creëren sterkere 3D-effecten.
  3. Pas translateX, translateY en translateZ aan om het element te verplaatsen.
  4. Schaal het element indien nodig en stel het transform-origin-punt in.
  5. Schakel Preserve 3D in voor geneste 3D-elementen. Kopieer de CSS.

Waarvoor je het kunt gebruiken

  • Maak een subtiel kaart-kanteleffect bij hover met rotateX en rotateY.
  • Bouw een 3D-flip-animatie voor een prijskaart met rotateY.
  • Ontwerp een hero-sectie met een perspectief-vervormd decoratief element.

Gebruik

Praktische voorbeelden

Voorbeeld

Muisknop-volgende kaartkanteling

Een ontwikkelaar test rotateY op 25deg en rotateX op -10deg. De voorbeeldkaart toont een kanteling naar rechts.

Voorbeeld

Uitgelichte prijskaartverhoging

Een ontwerper stelt translateZ in op 30px met perspective 800px. De kaart lijft verhoogd in 3D-ruimte.

Veelgemaakte fouten

  • Perspectief instellen op het getransformeerde element in plaats van de ouder.
  • translateZ gebruiken zonder perspectief in te stellen.
  • Een element meer dan 90 graden draaien zonder backface-visibility: hidden.

Verificatie

  1. Stel rotateY in op 30deg en rotateX op -15deg. Controleer rotateY(30deg) rotateX(-15deg).
  2. Stel perspective in op 300px en rotateY op 45deg. Het 3D-effect zou dramatischer moeten zijn.

FAQ

Vragen over CSS 3D Transform Generator

Wat is het verschil tussen perspective en transform: perspective()?

perspective op de ouder creëert een gedeelde 3D-ruimte. transform: perspective() geeft elk element zijn eigen perspectief.

Waarom ziet mijn 3D-getransformeerde element er plat uit?

De ouder heeft transform-style: preserve-3d nodig. Zonder dit worden kinderen plat in het 2D-vlak van de ouder.

Werken 3D CSS-transformaties in alle browsers?

Ja, in alle moderne browsers. Safari heeft af en toe weergavefouten met preserve-3d.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool