CSS Transform Playground

Combinez des transforms CSS 2D et 3D visuellement — translate, rotate, scale, skew et perspective avec apercu en direct et controle du transform-origin.

Transform Presets

Preview

Transform Origin

X: 50%Y: 50%

2D Transforms

Translate X: 0px

Translate Y: 0px

Rotate: 0°

Scale X: 100%

Scale Y: 100%

Skew X: 0°

Skew Y: 0°

3D Transforms

Show Tailwind

CSS

transform: perspective(800px);
transform-origin: 50% 50%;

Tailwind CSS

<div class="">
  ...
</div>

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Layout

Generateur de grilles CSS

Construisez des grilles CSS visuellement. Ajustez colonnes, lignes et espacements, puis copiez le code.

Try it ->

Layout

Previsualisation border-radius

Visualisez et ajustez des valeurs complexes de border-radius sur un apercu en direct.

Echelle typographique

Generez une echelle typographique responsive a partir d'une taille de base et d'un ratio. Export CSS variables, clamp() fluid et config Tailwind.

Try it ->

Layout

Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Try it ->

NewLayout

Generateur de systeme d'espacement

Construisez une echelle d'espacement coherente a partir d'une unite de base. Generez des echelles lineaires, geometriques ou Fibonacci avec CSS variables et config Tailwind.

Calculateur Clamp

Generez des valeurs CSS clamp() responsives pour la typographie et l'espacement fluides. Definissez viewport et valeurs min/max, previsualisation a chaque breakpoint.

Try it ->

Voir tous les Goodies