Last active
December 31, 2015 02:49
-
-
Save moshiuramit/7923859 to your computer and use it in GitHub Desktop.
Fliping Card Using CSS3 And HTML5
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
| <html> | |
| <html> | |
| <head> | |
| <title>Fliping Card </title> | |
| <meta name="author" content="Moshiur Rahman "> | |
| <style > | |
| ul.jam{ | |
| -moz-perspective:1000; | |
| } | |
| .jam li{ | |
| width: 200px; | |
| height: 200px; | |
| float: left; | |
| margin-right: 20px; | |
| margin-bottom: 50px; | |
| list-style: none; | |
| position: relative; | |
| cursor: pointer; | |
| counter-increment: i; /* count the number of element(li) */ | |
| } | |
| .jam li div{ | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| -moz-transition: all 1s; | |
| -moz-backface-visibility: hidden; /* hide the Reverse side of a div */ | |
| box-shadow: 0 6px 10px -2px rgba(0,0,0,.8); | |
| border-radius: 4px; | |
| } | |
| .jam li .front{ | |
| text-align: center; | |
| font-size: 40px; | |
| line-height: 200px; | |
| z-index: 10; | |
| color: rgba(55,39,49,.9); | |
| font-weight: bold; | |
| background: gray; | |
| } | |
| .jam li .front:after{ | |
| content: counter(i); /* card number */ | |
| } | |
| .jam li:hover .front{ | |
| z-index: 0; | |
| -moz-transform: rotateY(180deg); /* Rotate 180deg when hover */ | |
| } | |
| .jam li .back{ | |
| -moz-transform: rotateY( 180deg); /* Rotated y axis 180 deg before hover */ | |
| background: silver; | |
| } | |
| .jam li:hover .back{ | |
| -moz-transform: rotateY(0deg); /* Back to 0 deg when hover */ | |
| } | |
| .jam li .back img{ | |
| padding-top: 30%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="jam"> | |
| <li > | |
| <div class="front"> | |
| </div> | |
| <div class="back"> | |
| <img src="./images/logo.png" alt=""> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="front"> | |
| </div> | |
| <div class="back"> | |
| <img src="./images/logo.png" alt=""> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="front"> | |
| </div> | |
| <div class="back"> | |
| <img src="./images/logo.png" alt=""> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="front"> | |
| </div> | |
| <div class="back"> | |
| <img src="./images/logo.png" alt=""> | |
| </div> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment