##CSS3 transform scale
The scale function is used to scale elements in proportion to the original size. The scale(1) value is the original size, scale(0.5) will be half the size, and scale(2) will be double the original size.
Last active
August 29, 2015 14:25
-
-
Save anonymoussc/e1617048503784c26507 to your computer and use it in GitHub Desktop.
CSS3 transform scale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS3 transform scale </title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <h2>transform: scale(2,2)</h2> | |
| <div class="transformFour"> | |
| <h2>.transformFour</h2> | |
| <img src="AngularJS-Shield.svg"/> | |
| </div> | |
| <h2>transform: scale(2,1)</h2> | |
| <div class="transformFive"> | |
| <h2>.transformFive</h2> | |
| <img src="AngularJS-Shield.svg"/> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .transformFour > img { | |
| margin : 0px; | |
| } | |
| .transformFour img:hover { | |
| -webkit-transform : scale(2, 2); | |
| transform : scale(2, 2); | |
| } | |
| .transformFive > img { | |
| margin-left : 0px; | |
| } | |
| .transformFive img:hover { | |
| -webkit-transform : scale(2, 1); | |
| transform : scale(2, 1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment