Générateur de transformations CSS
Générateur de propriétés de transformation CSS en ligne gratuit, pas de installation nécessaire. Éditeur visuel des propriétés de transformation
À propos de CSS Transform
Construisez interactivement une déclaration transform avec des curseurs pour translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) et skew (X/Y), ainsi qu'un transform-origin modifiable et une taille de boîte d'aperçu réglable. Le CSS généré utilise translate3d pour les translations, combine scale/rotate/rotateX/rotateY/skew uniquement lorsqu'ils sont modifiés, et les émet avec transform-origin.
Mode d'emploi
1. Faites glisser les curseurs sous Translate, Scale, Rotate et Skew pour composer un transform ; chaque valeur dispose également d'un champ numérique pour une saisie précise. 2. Ajustez la Box Size de l'aperçu (50–250px) et modifiez Transform-Origin (toute chaîne d'origine CSS, par défaut 50% 50%). 3. Cliquez sur Reset pour ramener chaque valeur à sa valeur neutre par défaut. 4. Cliquez sur Copy pour copier à la fois la déclaration transform: ... et transform-origin: ....
Fonctions Transform et plages
translateX/Y/Z : de -200 à 200 px, émis ensemble sous forme de translate3d(x, y, z) lorsque l'un est non nul. scaleX/Y : de 0,1 à 3, émis sous forme de scale(x, y) lorsque l'un diffère de 1. rotate (Z) : de -360 à 360deg. rotateX/Y : de -180 à 180deg. skewX/Y : de -60 à 60deg, émis sous forme de skew(x, y) lorsque l'un est non nul. Si aucune fonction n'est modifiée, la sortie est transform: none.
▶Pourquoi ma rotation ne s'affiche-t-elle qu'en 3D alors que l'élément paraît plat ?
▶La sortie inclut-elle transform-origin ?
▶Puis-je saisir des valeurs exactes au lieu de faire glisser ?
▶Pourquoi translate produit-il un translate3d même si je n'ai déplacé qu'un seul axe ?
Si cet outil vous a été utile, pensez à m’offrir un café.
Achetez-moi un café.