×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

Rotate Card

0
0
 
0
Language: Javascript
Posted by: Natie Rautenbach
Added: Dec 7, 2018 3:20 AM
Modified: Dec 7, 2018 3:20 AM
Views: 3599
Tags: css html
  1. <div class="card-container">
  2.   <div class="card">
  3.     <div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
  4.     <div class="side back">Jimmy Eat World</div>
  5.   </div>
  6. </div>
  7. // css
  8. body {
  9.   font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  10.   margin: 12px 0;
  11. }
  12. .card-container {
  13.   cursor: pointer;
  14.   height: 150px;
  15.   perspective: 600;
  16.   position: relative;
  17.   width: 150px;
  18. }
  19. .card {
  20.   height: 100%;
  21.   position: absolute;
  22.   transform-style: preserve-3d;
  23.   transition: all 1s ease-in-out;
  24.   width: 100%;
  25. }
  26. .card:hover {
  27.   transform: rotateY(180deg);
  28. }
  29. .card .side {
  30.   backface-visibility: hidden;
  31.   border-radius: 6px;
  32.   height: 100%;
  33.   position: absolute;
  34.   overflow: hidden;
  35.   width: 100%;
  36. }
  37. .card .back {
  38.   background: #eaeaed;
  39.   color: #0087cc;
  40.   line-height: 150px;
  41.   text-align: center;
  42.   transform: rotateY(180deg);
  43. }

Write a comment

To post comments, please log in or register.