[{"data":1,"prerenderedAt":104},["ShallowReactive",2],{"tool-content-en-css-transform-generator":3},{"id":4,"title":5,"body":6,"description":16,"extension":96,"locale":97,"meta":98,"navigation":99,"path":100,"seo":101,"stem":102,"toolId":12,"__hash__":103},"tools\u002Ftools\u002Fen\u002Fcss-transform-generator.md","CSS Transform Generator",{"type":7,"value":8,"toc":88},"minimark",[9,13,17,33,38,85],[10,11,5],"h2",{"id":12},"css-transform-generator",[14,15,16],"p",{},"Compose translate, rotate, scale, skew and 3D transforms visually with a live preview, then copy the CSS, matrix form, or Tailwind value.",[14,18,19,20,24,25,28,29,32],{},"Stack transform layers in any order, set a custom ",[21,22,23],"code",{},"transform-origin",", and watch the preview update in real time. The tool emits three forms side by side: the friendly CSS function list, the equivalent ",[21,26,27],{},"matrix()"," \u002F ",[21,30,31],{},"matrix3d()"," value, and a Tailwind arbitrary-value class. Paste an existing transform or a raw matrix back in to decompose it back into editable layers.",[34,35,37],"h3",{"id":36},"features","Features",[39,40,41,49,61,67,73],"ul",{},[42,43,44,48],"li",{},[45,46,47],"strong",{},"Five layer kinds"," — translate (3D), rotate (rotateX\u002FY\u002FZ), scale (3D), skew (X\u002FY), and perspective.",[42,50,51,54,55,57,58,60],{},[45,52,53],{},"Matrix import"," — paste ",[21,56,27],{},", ",[21,59,31],{},", or any transform function list to decompose it into layers.",[42,62,63,66],{},[45,64,65],{},"Custom transform-origin"," — 9-grid picker plus free text entry for any value (keywords, percentages, lengths).",[42,68,69,72],{},[45,70,71],{},"Live preview"," with a dashed ghost outline so you can see how far the box moved from its origin.",[42,74,75,78,79,81,82,84],{},[45,76,77],{},"Three outputs"," — CSS declaration, ",[21,80,27],{},"\u002F",[21,83,31],{}," form, and Tailwind arbitrary value.",[14,86,87],{},"This tool runs entirely in your browser. No data leaves your device.",{"title":89,"searchDepth":90,"depth":90,"links":91},"",2,[92],{"id":12,"depth":90,"text":5,"children":93},[94],{"id":36,"depth":95,"text":37},3,"md","en",{},true,"\u002Ftools\u002Fen\u002Fcss-transform-generator",{"title":5,"description":16},"tools\u002Fen\u002Fcss-transform-generator","7HCCDT-g-sqXd4hgD-df6vp1allj7CCDQZgMQEHJiB4",1792391417045]