Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--full credit goes to eddy sims on codepen! feel free to check his stuff out :) https://codepen.io/edeesims
- i simply cleaned this up for the convenience of those who want it to be a blank slate from the get go
- -->
- <style>
- .card {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 300px;
- height: 300px;
- margin: -150px;
- float: left;
- perspective: 500px;
- }
- .content {
- position: absolute;
- width: 100%;
- height: 100%;
- border: 1px solid black;
- transition: transform 1s;
- transform-style: preserve-3d;
- }
- .card:hover .content {
- transform: rotateY( 180deg ) ;
- transition: transform 0.5s;
- }
- .front,
- .back {
- position: absolute;
- height: 100%;
- width: 100%;
- background: white;
- backface-visibility: hidden;
- }
- .back {
- background: white;
- transform: rotateY( 180deg );
- }
- </style>
- <div class="card">
- <div class="content">
- <div class="front">
- Front
- </div>
- <div class="back">
- Back!
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement