Générateur de transformation CSS

Le générateur de transformation CSS est un éditeur visuel pour la propriété de transformation CSS. Vous déplacez un curseur pour chaque fonction de transformation - translate, rotative, scale, skew, et les fonctions 3 D rotativeX, rotativeY et perspective - et regardez l'effet s'appliquer à un élément de prévisualisation en temps réel, puis copiez le CSS exact qu'il produit Il vous permet également de définir transform-origin, le point d'ancrage autour de chaque rotation et échelle pivote.

La propriété de transformation repositionne et remodèle un élément sans perturber la disposition qui l'entoure Un élément translaté, tourné ou mis à l'échelle occupe toujours sa boîte d'origine dans le flux, de sorte que les éléments voisins ne bougent pas, ce qui fait de la transformation l'outil correct pour les effets de vol stationnaire, les animations d'entrée et tout mouvement qui ne devrait pas déclencher de refusion Plusieurs fonctions peuvent être répertoriées dans une déclaration, et elles sont appliquées de droite à gauche dans l'espace de coordonnées de l'élément, donc l'ordre change véritablement le résultat : translate puis rotation déplace l'élément puis le fait tourner en place, tandis que la rotation puis la translation fait tourner les axes en premier et envoie l'élément d'angle.

Tout se passe dans votre navigateur Partez d'un préréglage comme Grow, Rotate, Flip ou 3 D Card, affinez chaque fonction et copiez la déclaration L'outil écrit uniquement les fonctions que vous avez réellement modifiées, de sorte que vous n'expédiez jamais une échelle redondante (1) ou une rotation (0 degré).Pas de compte, pas de téléchargements, et il continue de fonctionner hors ligne une fois la page chargée.

Deux détails permettent d'économiser un temps de débogage réel Premièrement, les rotations 3 D ne semblent tridimensionnelles que lorsqu'une perspective est présente - soit une fonction de perspective () d'abord dans la même transformée, telle que cet outil l'émet, soit une propriété de perspective sur le parent - sinon rotativeY écrase simplement l'élément à plat Deuxièmement, tout élément avec une transformée autre que aucune devient un bloc contenant pour ses descendants fixes et absolument positionnés et crée un nouveau contexte d'empilement, exactement comme la propriété de filtre Une position : enfant fixe à l'intérieur d'un parent transformé s'ancre à ce parent plutôt qu'à la fenêtre, et l'ordre des indices z qui fonctionnait auparavant peut changer Quand une transformation brise une disposition d'une manière qui n'a rien à faire avec son apparence, ce bloc est presque toujours.