CSS Transform Examples

\\n\\n\\n\\n\\n

\\n\\n

Translate

\\n

Moves an element horizontally or vertically.

\\n\\n

\\n

translate

\\n

\\n\\n

\\n\\n\\n\\n\\n

\\n\\n

Scale

\\n

Changes the size of an element.

\\n\\n

\\n

scale

\\n

scaleX

\\n

scaleY

\\n

\\n\\n

\\n\\n\\n\\n\\n

\\n\\n

Rotate

\\n\\n

\\n

rotate

\\n

\\n\\n

\\n\\n\\n\\n\\n

\\n\\n

Skew

\\n\\n

\\n

skew

\\n

skewX

\\n

skewY

\\n

\\n\\n

\\n\\n\\n\\n\\n

\\n\\n

Transform Origin

\\n

Changes the pivot point of the transformation.

\\n\\n

\\n

origin

\\n

\\n\\n

\\n\\n\\n\\n\\n

\\n\\n

Multiple Transforms

\\n\\n

\\n

multi

\\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":"872fc635-3bf9-4bff-a7c9-c5e1576ef74d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]