IHYPRESS PROGRAMMING
CSS examples with code and output for beginners
c programming
HOME | ASP | C | CSS | GNUPLOT | HTML | JAVASCRIPT | PERL | PHP | PYTHON | RUBY | SVG
CSS ❯ Two-Dimensional Transforms
<10>
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title>2-D Transforms</title> <style> #rotate20 {transform:rotate(20deg);} #translate {transform:translate(500px, 0px);} #scale1 {transform:scale(0.5, 0.7) translate(600px, 20px);} #skew1 {transform:skew(15deg, 20deg);} #skew2 {transform:skew(-10deg, 0deg);} </style> </head> <body> <p><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Original</p> <p id="scale1"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Scaled 0.5 x 0.7<br>Translation 600px right, 20px down</p> <p id="rotate20"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>20&deg; Rotation</p> <p id="translate"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Translation 500px right</p> <p id="skew1"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Skewed 15&deg;/20&deg;</p> <p id="skew2"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Skewed -10&deg;/0&deg;</p> </body></html>
Hergestellt in Deutschland / Made in Germany
2-D Transforms

Blue Swallow Motel
Original

Blue Swallow Motel
Scaled 0.5 x 0.7
Translation 600px right, 20px down

Blue Swallow Motel
20° Rotation

Blue Swallow Motel
Translation 500px right

Blue Swallow Motel
Skewed 15°/20°

Blue Swallow Motel
Skewed -10°/0°

COPYRIGHT © 2015-2024 IHY PRESS Frankfurt am Main 60329 Deutschland