Advertisement
Guest User

Flip card

a guest
Apr 28th, 2023
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.98 KB | None | 0 0
  1. <!--full credit goes to eddy sims on codepen! feel free to check his stuff out :) https://codepen.io/edeesims
  2. i simply cleaned this up for the convenience of those who want it to be a blank slate from the get go
  3. -->
  4. <style>
  5. .card {
  6. position: absolute;
  7. top: 50%;
  8. left: 50%;
  9. width: 300px;
  10. height: 300px;
  11. margin: -150px;
  12. float: left;
  13. perspective: 500px;
  14. }
  15. .content {
  16. position: absolute;
  17. width: 100%;
  18. height: 100%;
  19. border: 1px solid black;
  20. transition: transform 1s;
  21. transform-style: preserve-3d;
  22. }
  23. .card:hover .content {
  24. transform: rotateY( 180deg ) ;
  25. transition: transform 0.5s;
  26. }
  27. .front,
  28. .back {
  29. position: absolute;
  30. height: 100%;
  31. width: 100%;
  32. background: white;
  33. backface-visibility: hidden;
  34. }
  35. .back {
  36. background: white;
  37. transform: rotateY( 180deg );
  38. }
  39. </style>
  40. <div class="card">
  41. <div class="content">
  42. <div class="front">
  43. Front
  44. </div>
  45. <div class="back">
  46. Back!
  47. </div>
  48. </div>
  49. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement