Created
April 22, 2013 23:05
-
-
Save anonymous/5439354 to your computer and use it in GitHub Desktop.
A CodePen by Erick .
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="stylesheet" href="css/page.css"> | |
| <title>CSS3</title> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="myDiv1" class="mydiv"> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ipsum velit. Sed vestibulum quam tellus, sed feugiat est. Ut cursus tempor elementum. Morbi tempus luctus consectetur. Ut iaculis vulputate mauris, eu rutrum est pretium et. Vestibulum convallis, felis eu cursus elementum, dui dolor molestie diam, ac faucibus turpis magna et eros. Curabitur venenatis turpis eu neque pellentesque vitae consequat erat congue. Proin mattis sodales risus, ac tempus sapien sodales vitae. Pellentesque in leo erat. Nulla sagittis aliquam urna rutrum laoreet. | |
| </p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /*using the 3D transformation*/ | |
| body { | |
| background: #EEE url('../images/grid_square.png') 50px 50px repeat; | |
| font-family: arial, helvetica, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #wrapper { | |
| width: 960px; | |
| margin: 0 auto; | |
| } | |
| .mydiv { | |
| position: absolute; | |
| left: 350px; | |
| width: 400px; | |
| height: 400px; | |
| background-color: #ff9900; | |
| } | |
| #myDiv1 { | |
| top: 50px; | |
| } | |
| .mydiv p { | |
| padding: 25px; | |
| line-height: 1.5em; | |
| } | |
| /* advisable to use -webkit-transform:*/ | |
| #wrapper { | |
| perspective: 800; | |
| } | |
| #myDiv1 { | |
| transform: rotate(30deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment