SHARE
TWEET

Untitled

a guest Dec 8th, 2017 122 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top