Guest User

Untitled

a guest
Dec 8th, 2017
145
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. CSS ---------------------------------------------
  2. background:url(http://i.cubeupload.com/rlbagG.jpg);
  3. background-repeat:no-repeat;
  4. background-size:cover;
  5. }
  6. .flip-container {
  7. -webkit-perspective: 1000;
  8. -moz-perspective: 1000;
  9. -o-perspective: 1000;
  10. perspective: 1000;
  11. width:50%;
  12. margin:0 auto;
  13. }
  14.  
  15. .flip-container:hover .flipper,
  16. .flip-container.hover .flipper {
  17. -webkit-transform: rotateY(180deg);
  18. -moz-transform: rotateY(180deg);
  19. -o-transform: rotateY(180deg);
  20. transform: rotateY(180deg);
  21. }
  22.  
  23. .flip-container, .front, .back {
  24. width: 320px;
  25. height: 320px;
  26. margin-top:10%;
  27. }
  28.  
  29. .flipper {
  30. -webkit-transition: 0.6s;
  31. -webkit-transform-style: preserve-3d;
  32.  
  33. -moz-transition: 0.6s;
  34. -moz-transform-style: preserve-3d;
  35.  
  36. -o-transition: 0.6s;
  37. -o-transform-style: preserve-3d;
  38.  
  39. transition: 0.6s;
  40. transform-style: preserve-3d;
  41.  
  42. position: relative;
  43. }
  44.  
  45. .front, .back {
  46. -webkit-backface-visibility: hidden;
  47. -moz-backface-visibility: hidden;
  48. -o-backface-visibility: hidden;
  49. backface-visibility: hidden;
  50. border-radius:360px;
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. }
  55.  
  56. .front {
  57. background:url('http://i.cubeupload.com/X25wVt.jpg');
  58. z-index: 2;
  59. border-radius:360px;
  60. }
  61.  
  62.  
  63.  
  64. .back {
  65. -webkit-transform: rotateY(180deg);
  66. -moz-transform: rotateY(180deg);
  67. -o-transform: rotateY(180deg);
  68. transform: rotateY(180deg);
  69. background-color:rgba(0, 0, 0, 0.7);
  70.  
  71. }
  72.  
  73.  
  74. .back-logo {
  75. position: absolute;
  76. top: 15px;
  77. left: 85px;
  78. width: 160px;
  79. height: 117px;
  80. background: url(http://i.cubeupload.com/iW3nzl.png) 0 0 no-repeat;
  81. }
  82.  
  83. .back p {
  84. position: absolute;
  85. bottom: 90px;
  86. left: 0;
  87. right: 0;
  88. text-align: center;
  89. padding: 0 20px;
  90. line-height: 1em;
  91. color:white;
  92. font-size:15px;
  93. display:inline block;
  94. font-family:Arial;
  95.  
  96. }
  97. .back-title {
  98. font-weight: bold;
  99. position: absolute;
  100. top: 130px;
  101. left: 0;
  102. right: 0;
  103. font-family: 'Raleway', sans-serif;
  104. font-size: 24px;
  105. color:white;
  106. text-align:center;
  107. font-weigth:12;
  108. }
  109. #box{
  110. height:300px;
  111. width:100%;
  112.  
  113. HTML-------------------------------------------------
  114. <div class="flip-container">
  115. <div class="flipper">
  116. <div class="front">
  117. </div>
  118. <div class="back">
  119. <div class="back-logo"></div>
  120. <div class="back-title">keVin</div>
  121. <p>✕ 21 ✕ Virgo ✕ Dutch✕</p>
  122. </div>
  123. </div>
  124. </div>
  125. <div id="box">
  126. </div>
RAW Paste Data