Tema: efecto flip
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 28/05/2014, 04:17
fersosa
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 7 meses
Puntos: 1
Respuesta: efecto flip
Código HTML: 
Ver original
  1. <div id="bloques">
  2.     <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  3.     <div class="flipper">
  4.         <div class="front">
  5.             <img src="Images/muestra1.jpg"
  6.             width="500px"
  7.             height="246x"
  8.             />
  9.             
  10.         </div>
  11.         <div class="back">
  12.             <a href="http://www.forosdelweb.com/f53/muestra1/index.htm"><img src="Images/muestra1atras.jpg"
  13.             width="500px"
  14.             height="246px"
  15.             />
  16.         </a></div>
  17.     </div>
  18.     
  19.  
  20.     
  21.   </div>
  22. </div>



y el css:


Código CSS: 
Ver original
  1. /* entire container, keeps perspective */
  2. .flip-container {
  3.     perspective: 1000;
  4.     transform-style: preserve-3d;
  5. }
  6.     /*  UPDATED! flip the pane when hovered */
  7.     .flip-container:hover .back {
  8.         transform: rotateY(0deg);
  9.     }
  10.     .flip-container:hover .front {
  11.         transform: rotateY(180deg);
  12.     }
  13.  
  14. .flip-container, .front, .back {
  15.     width: 153px;
  16.     height: 154px;
  17. }
  18.  
  19. /* flip speed goes here */
  20. .flipper {
  21.     transition: 0.6s;
  22.     transform-style: preserve-3d;
  23.  
  24.     position: relative;
  25. }
  26.  
  27. /* hide back of pane during swap */
  28. .front, .back {
  29.     backface-visibility: hidden;
  30.     transition: 0.6s;
  31.     transform-style: preserve-3d;
  32.     position: absolute;
  33.     top: -159px;
  34.     left: 3px;
  35. }
  36.  
  37. /*  UPDATED! front pane, placed above back */
  38. .front {
  39.     z-index: 2;
  40.     transform: rotateY(0deg);
  41. }
  42.  
  43. /* back, initially hidden pane */
  44. .back {
  45.     transform: rotateY(-180deg);
  46. }
  47.  
  48. /* 
  49.     Some vertical flip updates 
  50. */
  51. .vertical.flip-container {
  52.     position: relative;
  53. }
  54.  
  55.     .vertical .back {
  56.         transform: rotateX(180deg);
  57.     }
  58.  
  59.     .vertical.flip-container:hover .back {
  60.         transform: rotateX(0deg);
  61.     }
  62.  
  63.     .vertical.flip-container:hover .front {
  64.         transform: rotateX(180deg);
  65.     }
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72. /* bloque2 */
  73.  
  74. /* entire container, keeps perspective */
  75. .flip-container {
  76.     perspective: 1000;
  77.     transform-style: preserve-3d;
  78. }
  79.     /*  UPDATED! flip the pane when hovered */
  80.     .flip-container:hover .atras {
  81.         transform: rotateY(0deg);
  82.     }
  83.     .flip-container:hover .frente {
  84.         transform: rotateY(180deg);
  85.     }
  86.  
  87. .flip-container, .frente, .atras {
  88.     width: 153px;
  89.     height: 154px;
  90. }
  91.  
  92. /* flip speed goes here */
  93. .flipper {
  94.     transition: 0.6s;
  95.     transform-style: preserve-3d;
  96.  
  97.     position: relative;
  98. }
  99.  
  100. /* hide back of pane during swap */
  101. .frente, .atras {
  102.     backface-visibility: hidden;
  103.     transition: 0.6s;
  104.     transform-style: preserve-3d;
  105.     position: absolute;
  106.     top: 275px;
  107.     left: 834px;
  108. }
  109.  
  110. /*  UPDATED! front pane, placed above back */
  111. .frente {
  112.     z-index: 2;
  113.     transform: rotateY(0deg);
  114. }
  115.  
  116. /* back, initially hidden pane */
  117. .atras {
  118.     transform: rotateY(-180deg);
  119. }
  120.  
  121. /* 
  122.     Some vertical flip updates 
  123. */
  124. .vertical.flip-container {
  125.     position: relative;
  126. }
  127.  
  128.     .vertical .atras {
  129.         transform: rotateX(180deg);
  130.     }
  131.  
  132.     .vertical.flip-container:hover .atras {
  133.         transform: rotateX(0deg);
  134.     }
  135.  
  136.     .vertical.flip-container:hover .frente {
  137.         transform: rotateX(180deg);
  138.     }



gracias!
Última edición por pzin; 28/05/2014 a las 04:34 Razón: formato código