Flipping content to a div (Transitions and 3D Transforms)
A Pen by Sayed Rafeeq on CodePen.
-
-
Save omaralalwi/bc771cf837ee180a90d2cbe67a4580cc to your computer and use it in GitHub Desktop.
CSS 3D Flip Box
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
| <h1>CSS 3D FLIP BOX</h1> | |
| <h3>Flipping content to a div (Transitions and 3D Transforms)</h3> | |
| <div class="wrapper"> | |
| <div class="col_third"> | |
| <div class="hover panel"> | |
| <div class="front"> | |
| <div class="box1"> | |
| <p>Front Side</p> | |
| </div> | |
| </div> | |
| <div class="back"> | |
| <div class="box2"> | |
| <p>Back Side</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col_third"> | |
| <div class="hover panel"> | |
| <div class="front"> | |
| <div class="box1"> | |
| <p>Front Side</p> | |
| </div> | |
| </div> | |
| <div class="back"> | |
| <div class="box2"> | |
| <p>Back Side</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col_third end"> | |
| <div class="hover panel"> | |
| <div class="front"> | |
| <div class="box1"> | |
| <p>Front Side</p> | |
| </div> | |
| </div> | |
| <div class="back"> | |
| <div class="box2"> | |
| <p>Back Side</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
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
| $(document).ready(function(){ | |
| // set up hover panels | |
| // although this can be done without JavaScript, we've attached these events | |
| // because it causes the hover to be triggered when the element is tapped on a touch device | |
| $('.hover').hover(function(){ | |
| $(this).addClass('flip'); | |
| },function(){ | |
| $(this).removeClass('flip'); | |
| }); | |
| }); |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| body { | |
| background-color: #ecf0f1; | |
| margin: 20px; | |
| font-family: Arial, Tahoma; | |
| font-size: 20px; | |
| color: #666666; | |
| text-align: center; | |
| } | |
| p { color: #ffffff; } | |
| /*-=-=-=-=-=-=-=-=-=-*/ | |
| /* Column Grids */ | |
| /*-=-=-=-=-=-=-=-=-= */ | |
| .col_half { width: 49%; } | |
| .col_third { width: 32%; } | |
| .col_fourth { width: 23.5%; } | |
| .col_fifth { width: 18.4%; } | |
| .col_sixth { width: 15%; } | |
| .col_three_fourth { width: 74.5%;} | |
| .col_twothird{ width: 66%;} | |
| .col_half, | |
| .col_third, | |
| .col_twothird, | |
| .col_fourth, | |
| .col_three_fourth, | |
| .col_fifth{ | |
| position: relative; | |
| display:inline; | |
| display: inline-block; | |
| float: left; | |
| margin-right: 2%; | |
| margin-bottom: 20px; | |
| } | |
| .end { margin-right: 0 !important; } | |
| /*-=-=-=-=-=-=-=-=-=-=- */ | |
| /* Flip Panel */ | |
| /*-=-=-=-=-=-=-=-=-=-=- */ | |
| .wrapper{ width: 980px; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;} | |
| .panel { | |
| margin: 0 auto; | |
| height: 130px; | |
| position: relative; | |
| -webkit-perspective: 600px; | |
| -moz-perspective: 600px; | |
| } | |
| .panel .front, | |
| .panel .back { | |
| text-align: center; | |
| } | |
| .panel .front { | |
| height: inherit; | |
| position: absolute; | |
| top: 0; | |
| z-index: 900; | |
| text-align: center; | |
| -webkit-transform: rotateX(0deg) rotateY(0deg); | |
| -moz-transform: rotateX(0deg) rotateY(0deg); | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -webkit-transition: all .4s ease-in-out; | |
| -moz-transition: all .4s ease-in-out; | |
| -ms-transition: all .4s ease-in-out; | |
| -o-transition: all .4s ease-in-out; | |
| transition: all .4s ease-in-out; | |
| } | |
| .panel .back { | |
| height: inherit; | |
| position: absolute; | |
| top: 0; | |
| z-index: 1000; | |
| -webkit-transform: rotateY(-180deg); | |
| -moz-transform: rotateY(-180deg); | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -webkit-transition: all .4s ease-in-out; | |
| -moz-transition: all .4s ease-in-out; | |
| -ms-transition: all .4s ease-in-out; | |
| -o-transition: all .4s ease-in-out; | |
| transition: all .4s ease-in-out; | |
| } | |
| .panel.flip .front { | |
| z-index: 900; | |
| -webkit-transform: rotateY(180deg); | |
| -moz-transform: rotateY(180deg); | |
| } | |
| .panel.flip .back { | |
| z-index: 1000; | |
| -webkit-transform: rotateX(0deg) rotateY(0deg); | |
| -moz-transform: rotateX(0deg) rotateY(0deg); | |
| } | |
| .box1{ | |
| background-color: #14bcc8; | |
| width: 250px; | |
| height: 150px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| } | |
| .box2{ | |
| background-color: #ff7e70; | |
| width: 250px; | |
| height: 150px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment