Created
January 11, 2014 22:01
-
-
Save dkdndes/8377552 to your computer and use it in GitHub Desktop.
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
| body { | |
| font-family: 'Lucida Grande', Verdana, Arial; | |
| font-size: 12px; | |
| } | |
| #container { | |
| position: relative; | |
| height: 300px; | |
| width: 300px; | |
| margin: 50px 100px; | |
| border: 2px solid blue; | |
| -webkit-perspective: 500; | |
| } | |
| #parent { | |
| margin: 10px; | |
| width: 280px; | |
| height: 280px; | |
| background-color: #844BCA; | |
| opacity: 0.8; | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-animation: spin 10s infinite linear; | |
| } | |
| #container:hover #parent { | |
| -webkit-transform-style: flat; | |
| } | |
| @-webkit-keyframes spin { | |
| from { -webkit-transform: rotateY(0); } | |
| to { -webkit-transform: rotateY(360deg); } | |
| } | |
| #parent > div { | |
| position: absolute; | |
| top: 40px; | |
| left: 40px; | |
| width: 200px; | |
| height: 200px; | |
| padding: 10px; | |
| -webkit-box-sizing: border-box; | |
| font-family: monospace; | |
| font-size: 12pt; | |
| } | |
| #parent > :first-child { | |
| background-color: #49DC93; | |
| -webkit-transform: translateZ(-100px) rotateY(45deg); | |
| } | |
| #parent > :last-child { | |
| background-color: #FF6; | |
| -webkit-transform: translateZ(50px) rotateX(20deg); | |
| -webkit-transform-origin: 50% top; | |
| } |
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> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="parent"> | |
| <div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div> | |
| <div>-webkit-transform: translateZ(50px) rotateX(20deg);</div> | |
| </div> | |
| </div> | |
| <h1>Transform Style</h1> | |
| <p>This example shows the effect of <code>-webkit-transform-style</code>. The blue box has perspective set on it. | |
| The purple box has | |
| <pre> | |
| -webkit-transform-style: preserve-3d; | |
| </pre> | |
| <p>which allows the yellow and green boxes to live in a shared 3D space, and thus appear to stand away | |
| from the purple box by virtue of their transforms. | |
| </p> | |
| <p> | |
| However, when you hover, we set the purple box to: | |
| </p> | |
| <pre> | |
| -webkit-transform-style: flat; | |
| </pre> | |
| <p>so its children collapse into it. Their <code>-webkit-transform</code> still applies, but now | |
| it's just a painting effect, and is not affected by the container's perspective. | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment