Advertisement
girlslovetyun

heart flip menu

Jun 21st, 2022 (edited)
1,133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.89 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6.  
  7. @font-face {
  8. src: url(https://dl.dropbox.com/s/sp80a2vopsaa164/SnackerComic_PerosnalUseOnly.ttf);
  9. font-family: snacker;
  10. }
  11.  
  12. .flip-card {
  13. background-color: transparent;
  14. width: 100px;
  15. height: 100px;
  16. perspective: 1000px;
  17. }
  18.  
  19. .flip-card-inner {
  20. position: relative;
  21. width: 100%;
  22. height: 100%;
  23. text-align: center;
  24. transition: transform 0.6s;
  25. transform-style: preserve-3d;
  26. }
  27.  
  28. .flip-card:hover .flip-card-inner {
  29. transform: rotateX(180deg);
  30. }
  31.  
  32. .flip-card-front, .flip-card-back {
  33. position: absolute;
  34. width: 100%;
  35. height: 100%;
  36. -webkit-backface-visibility: hidden;
  37. backface-visibility: hidden;
  38. -webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
  39. -webkit-mask-size: 100%;
  40. -webkit-mask-repeat: no-repeat;
  41. -webkit-mask-position: center;
  42. }
  43.  
  44. .flip-card-front {
  45. background-color: transparent;
  46. background: radial-gradient(circle, rgba(255,255,255,1) 34%, rgba(189,210,246,1) 100%);
  47. }
  48.  
  49. .flip-card-back {
  50. background-color: transparent;
  51. background: radial-gradient(circle, rgba(255,255,255,1) 34%, rgba(189,210,246,1) 100%);
  52. color: black;
  53. font-family: snacker;
  54. font-size: 15px;
  55. link-style: plain;
  56. text-decoration: none;
  57. transform: rotateX(180deg);
  58. }
  59. </style>
  60. </head>
  61. <body>
  62.  
  63. <div class="flip-card">
  64. <div class="flip-card-inner">
  65. <div class="flip-card-front">
  66. <img src="https://cdn.discordapp.com/attachments/735737732604625007/989044616089186354/65E254A6-9C32-4CA6-831D-17C1C6B817E7.jpg" style="width:100px;height:100px; opacity: 0;">
  67. </div>
  68. <div class="flip-card-back">
  69. <br></br>
  70. <p><a href="#one" style="link-style:plain; text-decoration: none;">about</a><p>
  71. <p><a href="#two" style="link-style:plain; text-decoration: none;">rules</a></p>
  72. <p><a href="#three" style="link-style:plain; text-decoration: none;">love</a></p>
  73. </div>
  74. </div>
  75. </div>
  76.  
  77. </body>
  78. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement