\\n\\n

CSS Transform Function Examples

\\n\\n\\n

\\n

translate(50px,20px)

\\n

Original

\\n

→

\\n

translate()

\\n

\\n\\n\\n

\\n

translateX(100px)

\\n

Original

\\n

→

\\n

translateX()

\\n

\\n\\n\\n

\\n

translateY(50px)

\\n

Original

\\n

→

\\n

translateY()

\\n

\\n\\n\\n

\\n

scale(1.2)

\\n

Original

\\n

→

\\n

scale()

\\n

\\n\\n\\n

\\n

scaleX(1.5)

\\n

Original

\\n

→

\\n

scaleX()

\\n

\\n\\n\\n

\\n

scaleY(0.8)

\\n

Original

\\n

→

\\n

scaleY()

\\n

\\n\\n\\n

\\n

rotate(45deg)

\\n

Original

\\n

→

\\n

rotate()

\\n

\\n\\n\\n

\\n

skew(20deg)

\\n

Original

\\n

→

\\n

skew()

\\n

\\n\\n\\n

\\n

skewX(20deg)

\\n

Original

\\n

→

\\n

skewX()

\\n

\\n\\n\\n

\\n

skewY(15deg)

\\n

Original

\\n

→

\\n

skewY()

\\n

\\n\\n

CSS Translate Transform Examples

\\n\\n\\n

\\n\\n

translate(50px, 20px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslate(x,y)\\n

\\n\\n

\\n\\n\\n

\\n\\n

translateX(80px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslateX()\\n

\\n\\n

\\n\\n\\n

\\n\\n

translateY(40px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslateY()\\n

\\n\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"fec99ba8-2cf3-4783-8c98-f6977eb08668","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Scale","styles":{}}],"children":[]},{"id":"c78a4104-a113-471f-a29b-2ef689e39d24","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"scale()","styles":{"code":true}},{"type":"text","text":" function changes the ","styles":{}},{"type":"text","text":"size of an element","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"229b0e1a-5cf3-4e7f-aacb-af2052fda730","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"388d015a-a5ad-475a-b727-022b7c262e86","type":"columnList","props":{},"children":[{"id":"9f1081f2-6be8-4126-8768-140cd5078587","type":"column","props":{"width":1.0013227694775464},"children":[{"id":"754cf3bf-5fe4-41b5-9ec7-5a3334f106aa","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Function","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"scale(x,y)","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Scales element horizontally and vertically","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"scaleX()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Horizontal scaling","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"scaleY()","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Vertical scaling","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]},{"id":"6a9c15a5-3ed6-41ab-9f9a-f0b3014195ae","type":"column","props":{"width":0.9986772305224536},"children":[{"id":"af86ee36-f2b9-4023-bf8d-161c26920da6","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Value","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Result","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"1","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Normal size","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":">1","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Larger","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"<1","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Smaller","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]}]},{"id":"1ff1ff98-8534-40fa-8044-4301988f2222","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"8ebf5e3b-88bf-43e8-ac46-eceb7a6b1341","type":"procode","props":{"code":".box{\ntransform: scale(1.2);\n}\n","language":"html","filename":"","files":"[{\"id\":\"94ql8ubnz\",\"name\":\"code\",\"code\":\".box{\\ntransform: scale(1.2);\\n}\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2586b206-5dcd-45af-8220-906d14e34de8","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nCSS Translate Transform\\n\\n\\n\\n\\n\\n\\n

\\n\\n

CSS Translate Transform Examples

\\n\\n\\n

\\n\\n

translate(50px, 20px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslate(x,y)\\n

\\n\\n

\\n\\n\\n

\\n\\n

translateX(80px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslateX()\\n

\\n\\n

\\n\\n\\n

\\n\\n

translateY(40px)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\ntranslateY()\\n

\\n\\n

CSS Rotation Units

\\n\\n

\\n45deg\\n

\\n\\n

\\n0.785rad\\n

\\n\\n

\\n0.25turn\\n

\\n\\n

CSS Skew Transform Examples

\\n\\n\\n

\\n\\n

skew(20deg,10deg)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\nskew(x,y)\\n

\\n\\n

\\n\\n\\n

\\n\\n

skewX(20deg)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\nskewX()\\n

\\n\\n

\\n\\n\\n

\\n\\n

skewY(15deg)

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\nskewY()\\n

\\n\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"05d6e2bc-8ef6-4d6d-8c11-7503f5ebe766","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Transform Origin","styles":{}}],"children":[]},{"id":"c3200571-631e-4eea-82f8-690a37f06c5a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"transform-origin","styles":{"bold":true,"code":true}},{"type":"text","text":" property defines the ","styles":{}},{"type":"text","text":"point where the transformation begins","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"9dd577b8-ecc5-4d7a-a29f-686ec671ab07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"561c232d-0ad4-4138-a322-d183a3d896a6","type":"columnList","props":{},"children":[{"id":"09581307-74ce-432a-80a8-18f7113f22a3","type":"column","props":{"width":1},"children":[{"id":"bedd747c-55d7-4e05-ad28-b29c9c50efd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default origin:","styles":{}}],"children":[]},{"id":"cbd6962d-e8da-4f38-bdb0-3aa03ce2977f","type":"procode","props":{"code":"center center\n","language":"html","filename":"","files":"[{\"id\":\"fpjc3n340\",\"name\":\"code\",\"code\":\"center center\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"21274049-8b42-4ef9-8ae4-63d186a574ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4db95633-8683-4632-a105-eb7c9a5e19ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]},{"id":"e61048b4-0bc2-47cc-82a6-cd6e3fd7c375","type":"column","props":{"width":1},"children":[{"id":"a8146376-47b3-45ef-ab40-7331e036bf2f","type":"procode","props":{"code":".box{\ntransform-origin: top left;\ntransform: rotate(45deg);\n}\n","language":"html","filename":"","files":"[{\"id\":\"9ap6eqaw9\",\"name\":\"code\",\"code\":\".box{\\ntransform-origin: top left;\\ntransform: rotate(45deg);\\n}\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]}]}]},{"id":"8dcf3802-2f18-4d56-9eff-5137af843a3b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"cfc96d6e-5e41-4bb3-a56e-6655de66721f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common values:","styles":{}}],"children":[]},{"id":"67f06b54-5377-443a-89e5-454569712d7e","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Value","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Meaning","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"center","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Center of element","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"top","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Top edge","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"bottom","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Bottom edge","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"left","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Left edge","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"right","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Right edge","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"26bda578-aaa7-49ae-bd79-9aa627d4a88f","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nCSS Transform Origin\\n\\n\\n\\n\\n\\n\\n

\\n\\n

CSS Transform Origin Examples

\\n\\n\\n

\\n

transform-origin: center

\\n\\n

\\n

Original

\\n

→

\\n

center

\\n

\\n\\n\\n

\\n

transform-origin: top

\\n\\n

\\n

Original

\\n

→

\\n

top

\\n

\\n\\n\\n

\\n

transform-origin: bottom

\\n\\n

\\n

Original

\\n

→

\\n

bottom

\\n

\\n\\n\\n

\\n

transform-origin: left

\\n\\n

\\n

Original

\\n

→

\\n

left

\\n

\\n\\n\\n

\\n

transform-origin: right

\\n\\n

\\n

Original

\\n

→

\\n

right

\\n

\\n\\n

CSS Multiple Transform Example

\\n\\n

Multiple transform functions can be combined within a single transform property.

\\n\\n

\\nOriginal\\n

\\n\\n

→

\\n\\n

\\nscale + rotate + translate\\n

\\n\\n