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

  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.