advanced code snippet search

Posted By

Nettuts on 12/02/10


Tagged

css CSS3


Versions (?)

Who likes this?

9 people have marked this snippet as a favorite

embrace
diegotrap
petemcbride
qubestream
jarc100
SevenLayersDesign
Arvi
thoaionline
jbyerson


Flipping Card

 / Published in: CSS
 

URL: http://nettuts.s3.amazonaws.com/855_cssProperties/flipper.html

Expand | Embed | Plain Text 
  1. <!DOCTYPE HTML> 
  2. <html lang="en-US"> 
  3.    <head> 
  4.       <meta charset="UTF-8"> 
  5.       <title>Tuts</title> 
  6.       <style> 
  7.  
  8.          body, html { height: 100%; width: 100%; } 
  9.  
  10.          body {
  11.             display: -moz-box;
  12.             display: -webkit-box;
  13.             display: box;
  14.  
  15.             -moz-box-orient: horizontaerl; /* the default, so not really necessary here */
  16.             -webkit-box-orient: horizontal;
  17.             box-orient: horizontal;
  18.  
  19.             -moz-box-pack: center;
  20.             -moz-box-align: center;
  21.  
  22.             -webkit-box-pack: center;
  23.             -webkit-box-align: center;
  24.  
  25.             box-pack: center;
  26.             box-align: center;
  27.          }
  28.  
  29.          .box {
  30.             background: #e3e3e3;
  31.             border: 1px dashed #666;
  32.             margin: auto;
  33.             width: 400px;
  34.             height: 200px;
  35.             cursor: pointer;
  36.             position: relative;
  37.  
  38.             -webkit-transition: all 1s;	
  39.             -moz-transition: all 1s;
  40.             transition: all 1s;	
  41.          }
  42.  
  43.  
  44.  
  45.          .box::after {
  46.             content: '';
  47.             position: absolute;
  48.             width: 70%;
  49.             height: 10px;
  50.             bottom: 0;
  51.             left: 15%;
  52.             z-index: -1;
  53.  
  54.             -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
  55.             -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
  56.             box-shadow: 0 9px 20px rgba(0,0,0,.4);
  57.          }
  58.  
  59.          .box > div {
  60.             position: absolute;
  61.             width: 100%; height: 100%;
  62.             top: 0; left: 0;
  63.             background: #e3e3e3;
  64.             -webkit-transition: all .5s ease-in-out;
  65.             -moz-transition: all .5s ease-in-out;
  66.             transition: all .5s ease-in-out;
  67.  
  68.             font: 45px/200px bold helvetica, arial, sans-serif;
  69.             text-align: center;
  70.          }
  71.  
  72.          /* Make sure we see the front side first */
  73.          .box > div:first-child {
  74.             position: relative;
  75.             z-index: 2;
  76.          }
  77.  
  78.          .box:hover {
  79.             -webkit-transform: rotateY(180deg);
  80.             -moz-transform: rotateY(180deg);
  81.             transform: rotateY(180deg);   	   	
  82.          }
  83.  
  84.          .box:hover > div:first-child {
  85.             opacity: 0;
  86.          }
  87.  
  88.          .box:hover div:last-child {
  89.             -webkit-transform: rotateY(180deg);
  90.             -moz-transform: rotateY(180deg);
  91.             transform: rotateY(180deg);
  92.          }
  93.  
  94.  
  95.       </style> 
  96.  
  97.    </head> 
  98.  
  99.    <body> 
  100.  
  101.       <div class="box"> 
  102.          <div>Hello</div> 
  103.          <div> World </div> 
  104.       </div> 
  105.  
  106.    </body> 
  107. </html>

Report this snippet  

You need to login to post a comment.