Created
October 13, 2014 12:46
-
-
Save Tom-Millard/ea799fb0d72dc4004dce to your computer and use it in GitHub Desktop.
[add your bin description] // source http://jsbin.com/kapita/59
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 name="description" content="[add your bin description]" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| /* | |
| Fancy rotating button using CSS3 animations | |
| */ | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: white; | |
| } | |
| .btn { | |
| font-family: sans-serif; | |
| } | |
| .btn span { | |
| color: black; | |
| } | |
| .btn { | |
| display: block; | |
| width: auto; | |
| height: 40px; | |
| position: relative; | |
| } | |
| .btn cube { | |
| -moz-transition: all, 0.5s; | |
| -webkit-transition: all, 0.5s; | |
| transition: all, 0.5s; | |
| -moz-transform-style: preserve-3d; | |
| -webkit-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| -moz-transform: translateZ(-20px) rotateX(0deg); | |
| -ms-transform: translateZ(-20px) rotateX(0deg); | |
| -webkit-transform: translateZ(-20px) rotateX(0deg); | |
| transform: translateZ(-20px) rotateX(0deg); | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| cursor: pointer; | |
| } | |
| .btn cube:hover { | |
| -moz-transform: translateZ(-20px) rotateX(90deg); | |
| -ms-transform: translateZ(-20px) rotateX(90deg); | |
| -webkit-transform: translateZ(-20px) rotateX(90deg); | |
| transform: translateZ(-20px) rotateX(90deg); | |
| } | |
| .btn .block { | |
| width: auto; | |
| height: 40px; | |
| position: absolute; | |
| color: white; | |
| } | |
| .btn .front { | |
| -moz-transform: translateZ(20px); | |
| -ms-transform: translateZ(20px); | |
| -webkit-transform: translateZ(20px); | |
| transform: translateZ(20px); | |
| } | |
| .btn .bottom { | |
| -moz-transform: rotateX(-90deg) translateZ(20px); | |
| -ms-transform: rotateX(-90deg) translateZ(20px); | |
| -webkit-transform: rotateX(-90deg) translateZ(20px); | |
| transform: rotateX(-90deg) translateZ(20px); | |
| } | |
| .btn span { | |
| border: 0; | |
| font-size: 1.2em; | |
| background-color: #F3F3F3; | |
| padding: .5em .7em; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body style="background-color : white;"> | |
| <a class="btn"> | |
| <cube> | |
| <side class="front block"><span>Hello</span></side> | |
| <side class="bottom block"><span>Hello</span></side> | |
| </cube> | |
| </a> | |
| <script id="jsbin-source-css" type="text/css">/* | |
| Fancy rotating button using CSS3 animations | |
| */ | |
| @import "compass"; | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| $btn-width : auto; | |
| $btn-height : 40px; | |
| $translate-z : ($btn-height / 2); | |
| body { | |
| background-color : white; | |
| } | |
| .btn { | |
| font-family: sans-serif; | |
| span { | |
| color : black; | |
| } | |
| } | |
| .btn { | |
| display : block; | |
| width : #{$btn-width}; | |
| height : #{$btn-height}; | |
| position : relative; | |
| cube { | |
| @include transition(all, 0.5s); | |
| @include transform-style(preserve-3d); | |
| @include transform(translateZ( #{(0 - $translate-z)} ) rotateX( 0deg )); | |
| width : 100%; | |
| height : 100%; | |
| position : absolute; | |
| cursor : pointer; | |
| } | |
| cube:hover { | |
| @include transform(translateZ( #{(0 - $translate-z)} ) rotateX( 90deg )); | |
| } | |
| .block { | |
| width : #{$btn-width}; | |
| height : #{$btn-height}; | |
| position : absolute; | |
| color : white; | |
| } | |
| .front{ | |
| @include transform(translateZ( $translate-z )); | |
| } | |
| .bottom { | |
| @include transform(rotateX( -90deg ) translateZ( $translate-z )); | |
| } | |
| span { | |
| border: 0; | |
| font-size: 1.2em; | |
| background-color: #F3F3F3; | |
| padding: .5em .7em; | |
| display: inline-block; | |
| } | |
| }</script> | |
| </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
| /* | |
| Fancy rotating button using CSS3 animations | |
| */ | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: white; | |
| } | |
| .btn { | |
| font-family: sans-serif; | |
| } | |
| .btn span { | |
| color: black; | |
| } | |
| .btn { | |
| display: block; | |
| width: auto; | |
| height: 40px; | |
| position: relative; | |
| } | |
| .btn cube { | |
| -moz-transition: all, 0.5s; | |
| -webkit-transition: all, 0.5s; | |
| transition: all, 0.5s; | |
| -moz-transform-style: preserve-3d; | |
| -webkit-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| -moz-transform: translateZ(-20px) rotateX(0deg); | |
| -ms-transform: translateZ(-20px) rotateX(0deg); | |
| -webkit-transform: translateZ(-20px) rotateX(0deg); | |
| transform: translateZ(-20px) rotateX(0deg); | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| cursor: pointer; | |
| } | |
| .btn cube:hover { | |
| -moz-transform: translateZ(-20px) rotateX(90deg); | |
| -ms-transform: translateZ(-20px) rotateX(90deg); | |
| -webkit-transform: translateZ(-20px) rotateX(90deg); | |
| transform: translateZ(-20px) rotateX(90deg); | |
| } | |
| .btn .block { | |
| width: auto; | |
| height: 40px; | |
| position: absolute; | |
| color: white; | |
| } | |
| .btn .front { | |
| -moz-transform: translateZ(20px); | |
| -ms-transform: translateZ(20px); | |
| -webkit-transform: translateZ(20px); | |
| transform: translateZ(20px); | |
| } | |
| .btn .bottom { | |
| -moz-transform: rotateX(-90deg) translateZ(20px); | |
| -ms-transform: rotateX(-90deg) translateZ(20px); | |
| -webkit-transform: rotateX(-90deg) translateZ(20px); | |
| transform: rotateX(-90deg) translateZ(20px); | |
| } | |
| .btn span { | |
| border: 0; | |
| font-size: 1.2em; | |
| background-color: #F3F3F3; | |
| padding: .5em .7em; | |
| display: inline-block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment