Tema: centrado de varios div con efecto flip
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/06/2015, 15:51
fersosa
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: centrado de varios div con efecto flip
Si claro!

Código HTML: 
Ver original
  1. <div id="resenas">
  2.    
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9. <div id="resenasflipper">
  10. <div class="BoxTitular">
  11.   <span>Reseña del libro Descendencia</span>
  12. </div>
  13. <div class="cuadrosflip">
  14. <!-- RESEÑA BRECHA -->
  15. <div class="flip">
  16. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  17.   <div class="flipper">
  18.      
  19.     <!-- Front -->  
  20.     <div class="front">
  21.        <p id="textocentrado">Reseña Brecha</p> 
  22.     </div>
  23.      
  24.     <!-- BACK -->  
  25.     <div class="back">
  26.        <a href="#" onclick=window.open("../horacio/resenadescendenciabrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  27.     </div>
  28.      
  29.   </div>
  30. </div>
  31. </div>
  32.  
  33.  
  34.  
  35.  
  36. <!-- RESEÑA EL CULTURAL -->
  37. <div class="flip">
  38. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  39.   <div class="flipper">
  40.      
  41.     <!-- Front -->  
  42.     <div class="front">
  43.        <p id="textocentrado">Reseña El Cultural</p> 
  44.     </div>
  45.      
  46.     <!-- BACK -->  
  47.     <div class="back">
  48.        <a href="#" onclick=window.open("../horacio/resenadescendenciaelcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  49.     </div>
  50.      
  51.   </div>
  52. </div>
  53. </div>
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62. <!-- RESEÑA LA DIARIA -->
  63. <div class="flip">
  64. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  65.   <div class="flipper">
  66.      
  67.     <!-- Front -->  
  68.     <div class="front">
  69.        <p id="textocentrado">Reseña La Diaria</p> 
  70.     </div>
  71.      
  72.     <!-- BACK -->  
  73.     <div class="back">
  74.        <a href="#" onclick=window.open("../horacio/resenadescendencialadiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  75.     </div>
  76.      
  77.   </div>
  78. </div>
  79. </div>
  80.  
  81. </div>
  82.   
  83.   
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. <div class="BoxTitular" id="separador">
  96.   <span>Reseñas del libro El revés asombrado de la ocarina</span>
  97. </div>
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  
  104. <!-- RESEÑA EL CULTURAL -->
  105. <div class="flip">
  106. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  107.   <div class="flipper">
  108.      
  109.     <!-- Front -->  
  110.     <div class="front">
  111.        <p id="textocentrado">Reseña El cultural</p> 
  112.     </div>
  113.      
  114.     <!-- BACK -->  
  115.     <div class="back">
  116.        <a href="#" onclick=window.open("../horacio/elreveselcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  117.     </div>
  118.      
  119.   </div>
  120. </div>
  121. </div>
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130. <!-- RESEÑA BRECHA -->
  131. <div class="flip">
  132. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  133.   <div class="flipper">
  134.      
  135.     <!-- Front -->  
  136.     <div class="front">
  137.        <p id="textocentrado">Reseña Brecha</p> 
  138.     </div>
  139.      
  140.     <!-- BACK -->  
  141.     <div class="back">
  142.        <a href="#" onclick=window.open("../horacio/resenaelrevesasombradobrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  143.     </div>
  144.      
  145.   </div>
  146. </div>
  147. </div>
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159.  
  160. <div class="BoxTitular" id="separador">
  161.   <span>Reseñas del libro El Silencio de los pájaros</span>
  162. </div>
  163.  
  164.  
  165. <!-- RESEÑA BRECHA -->
  166. <div class="flip">
  167. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  168.   <div class="flipper">
  169.      
  170.     <!-- Front -->  
  171.     <div class="front">
  172.        <p id="textocentrado">Reseña Brecha</p> 
  173.     </div>
  174.      
  175.     <!-- BACK -->  
  176.     <div class="back">
  177.        <a href="#" onclick=window.open("../horacio/resenaelsilenciobrecha.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  178.     </div>
  179.      
  180.   </div>
  181. </div>
  182. </div>
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193. <!-- RESEÑA BÚSQUEDA -->
  194. <div class="flip">
  195. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  196.   <div class="flipper">
  197.      
  198.     <!-- Front -->  
  199.     <div class="front">
  200.        <p id="textocentrado">Reseña Búsqueda</p> 
  201.     </div>
  202.      
  203.     <!-- BACK -->  
  204.     <div class="back">
  205.        <a href="#" onclick=window.open("../horacio/resenaelsilenciobusqueda.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  206.     </div>
  207.      
  208.   </div>
  209. </div>
  210. </div>
  211.  
  212.  
  213.  
  214.  
  215.  
  216.  
  217.         
  218.  
  219.  
  220.    
  221.    
  222.    
  223.  
  224. <!-- RESEÑA SOCIO ESPECTACULAR -->
  225. <div class="flip">
  226. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  227.   <div class="flipper">
  228.      
  229.     <!-- Front -->  
  230.     <div class="front">
  231.        <p id="textocentrado">Reseña Socio Espectacular</p> 
  232.     </div>
  233.      
  234.     <!-- BACK -->  
  235.     <div class="back">
  236.        <a href="#" onclick=window.open("../horacio/resenaelsilenciosocioespectacular.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  237.     </div>
  238.      
  239.   </div>
  240. </div>
  241. </div>
  242.   
  243.  
  244.  
  245.    
  246.    
  247.    
  248.    
  249.    
  250.    
  251.    
  252.  
  253. <!-- RESEÑA LA DIARIA -->
  254. <div class="flip">
  255. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  256.   <div class="flipper">
  257.      
  258.     <!-- Front -->  
  259.     <div class="front">
  260.        <p id="textocentrado">Reseña La Diaria</p> 
  261.     </div>
  262.      
  263.     <!-- BACK -->  
  264.     <div class="back">
  265.        <a href="#" onclick=window.open("../horacio/resenaelsilencioladiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  266.     </div>
  267.      
  268.   </div>
  269. </div>
  270. </div>   
  271.    
  272.    
  273.    
  274.    
  275.    
  276.  
  277.    
  278.    
  279.    
  280.    
  281.         
  282.         
  283.         
  284. <div class="BoxTitular" id="separador">
  285.   <span>Reseñas del libro Oso de Trapo</span>
  286. </div>        
  287.         
  288.  
  289.  
  290. <!-- RESEÑA DOSSIER -->
  291. <div class="flip">
  292. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  293.   <div class="flipper">
  294.      
  295.     <!-- Front -->  
  296.     <div class="front">
  297.        <p id="textocentrado">Reseña Dossier</p> 
  298.     </div>
  299.      
  300.     <!-- BACK -->  
  301.     <div class="back">
  302.        <a href="#" onclick=window.open("../horacio/resenaosodetrapodossier.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  303.     </div>
  304.      
  305.   </div>
  306. </div>
  307. </div>   
  308.  
  309.  
  310.   
  311.      
  312.    
  313.    
  314.  
  315. <!-- RESEÑA EL CULTURAL -->
  316. <div class="flip">
  317. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  318.   <div class="flipper">
  319.      
  320.     <!-- Front -->  
  321.     <div class="front">
  322.        <p id="textocentrado">Reseña El Cultural</p> 
  323.     </div>
  324.      
  325.     <!-- BACK -->  
  326.     <div class="back">
  327.        <a href="#" onclick=window.open("../horacio/resenaosodetrapoelcultural.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  328.     </div>
  329.      
  330.   </div>
  331. </div>
  332. </div>   
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.   
  344. <div class="BoxTitular" id="separador">
  345.   <span>Reseñas del libro Fabril</span>
  346. </div>    
  347.   
  348.  
  349.  
  350. <!-- RESEÑA LA DIARIA -->
  351. <div class="flip">
  352. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  353.   <div class="flipper">
  354.      
  355.     <!-- Front -->  
  356.     <div class="front">
  357.        <p id="textocentrado">Reseña La Diaria</p> 
  358.     </div>
  359.      
  360.     <!-- BACK -->  
  361.     <div class="back">
  362.        <a href="#" onclick=window.open("../horacio/resenafabrilladiaria.html","miwin","width=300,height=200,scrollbars=yes")>Enlace</a>
  363.     </div>
  364.      
  365.   </div>
  366. </div>
  367. </div>   
  368.  
  369.  
  370.  
  371.  
  372.  
  373.   
  374.    
  375.   
  376.  
  377.      </div>
  378.    </div>
  379.    </fieldset>
  380.   
  381.  
  382.  
  383.  
  384.     
  385.     </div> 
  386. </div>
Código CSS: 
Ver original
  1. #resenasflipper {
  2.       width:100%;
  3.       height: 100%;
  4.       margin: 0 auto;
  5.       text-align: center;
  6. }
  7. .cuadrosflip {
  8.       width: 100%;
  9.       height: 100%;
  10.       margin: 0 auto;
  11.       text-align: center;
  12. }
  13. /* Asignamos perspectiva a nuestro contenedor */
  14. .flip-container {
  15.   width:200px;
  16. height:100px;
  17. float:left;
  18.  
  19. max-width:500px;
  20. text-align: center;  
  21.   perspective: 1000;
  22.   border: 1px solid #d9d9d9;
  23.   /* Para Firefox - IE10+ debemos agregar propiedades extras */
  24.   -moz-transform-style: preserve-3d;
  25.   -moz-transform: perspective(1000px);
  26.   -ms-transform-style: preserve-3d;
  27.   -ms-transform: perspective(1000px);
  28. }
  29.  
  30. .flip-container, .front, .back {
  31.   width: 200px;
  32.   height: 100px;
  33. }
  34.  
  35. /* preserve-3d: Indicamos que todo elemento hijo del div flipper estara en un espacio 3D XYZ  */
  36. .flipper {
  37.   transition: 0.6s;
  38.   transform-style: preserve-3d;
  39.   position: relative;
  40. }
  41.  
  42. .front, .back {
  43.   /* Backface: Nos permite ocultar la parte posterior de los elementos html */
  44.   /* en este caso FRONT - BACK */
  45.   backface-visibility: hidden;
  46.   transition: 0.6s;
  47.   transform-style: preserve-3d;
  48.   position: absolute;
  49.   top: 0;
  50.   left: 0;
  51. }
  52.  
  53. /* FRONT: eje Y = 0   */
  54. .front {
  55.   transform: rotateY(0deg);
  56.   background: #201F1F;
  57. }
  58.  
  59. /* BACK: eje Y = -180, se mantendra oculto */
  60. .back {
  61.   transform: rotateY(-180deg);
  62.   background: gray;
  63. }.flip-container:hover .front {
  64.   transform: rotateY(180deg);
  65. }
  66. .flip-container:hover .back {
  67.   transform: rotateY(0deg);
  68. }
  69. /* Toggle - Moviles */
  70. .flip-container.hover .front {
  71.   transform: rotateY(180deg);
  72. }
  73. .flip-container.hover .back {
  74.   transform: rotateY(0deg);
  75. }  
  76. #separador {
  77.   margin: 0 auto;
  78.   text-align: center;
  79.   clear: both;
  80. }