teenagegoths

360 degrees+optimized card flip

Sep 22nd, 2021 (edited)
1,359
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--this is complicated to install on carrd, my bad
  2. container class: card // side classes: cardface cardfront & cardface cardback-->
  3.  
  4. <!-- NUMBER #1 EMBED: HIDDEN, HEAD -->
  5. <head>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7. </head>
  8.  
  9. <!-- NUMBER #2 EMBED: HIDDEN, BODY TOP -->
  10. <style> body { font-family: sans-serif;}
  11.  
  12. #main {
  13. width: 15em;
  14. height: 15em;
  15.  
  16. perspective: 600px;
  17. transform:scale(1.2, 1.2) translateY(3.5em);
  18. }
  19.  
  20. .card {
  21. width: 100%;
  22. height: 100%;
  23.  
  24. transform-style: preserve-3d;
  25. cursor: pointer;
  26. position: relative;
  27. }
  28.  
  29. .cardface {
  30. border-radius:5px;
  31. top:-3em;
  32. position: absolute;
  33. width: 100%;
  34. height: 100%;
  35. line-height: 15em;
  36. color: white;
  37. text-align: center;
  38. font-weight: bold;
  39. font-size: 40px;
  40. -webkit-backface-visibility: hidden;
  41. backface-visibility: hidden;
  42. }
  43.  
  44. .cardfront {
  45.  
  46. }
  47.  
  48. .cardback {
  49.  
  50. width:15em;
  51. height:15em;
  52. border:3px black double;
  53. padding:0.5em 0.5em 0.5em 0.5em;
  54. background-color:white;
  55. position:relative;
  56. top:-0em;
  57. transform: translateY(-6.75em) translateZ(-1px) rotateY(180deg);
  58. }</style>
  59.  
  60. <!-- NUMBER #3 EMBED: HIDDEN, BODY END -->
  61.  
  62. <script>
  63. $(document).ready(function () {
  64. $(".card").addClass("blue");
  65. });
  66.  
  67. var hasBeenClicked = false;
  68. jQuery('a').click(function () {
  69. hasBeenClicked = true;
  70. });
  71.  
  72. $(".card").click(function () {
  73. var $this = $(".card");
  74.  
  75. if (hasBeenClicked) {
  76. hasBeenClicked = false;
  77. }
  78. else if ($this.hasClass("blue")) {
  79. $this.css("transform", "rotateY(180deg)");
  80. $this.css("transition", "1s")
  81. $this.removeClass("blue");
  82. $this.addClass("red");
  83. } else {
  84. $this.css("transform", "rotateY(360deg)");
  85. $this.css("transition", "1s")
  86.  
  87. $this.removeClass("red");
  88. $this.addClass("blue");
  89. }
  90. });
  91.  
  92. const transition = document.querySelector(".card");
  93. transition.ontransitionend = () => {
  94. if ($('.card').hasClass("blue")) {
  95. $('.card').css("transform", "rotateY(0deg)");
  96. $('.card').css("transition", "none");
  97. }
  98. };</script>
  99.  
  100.  
  101. <!-- have fun smile -->
RAW Paste Data