Foros del Web » Creando para Internet » CSS »

centrado de varios div con efecto flip

Estas en el tema de centrado de varios div con efecto flip en el foro de CSS en Foros del Web. Hola dejo un codepen donde no puedo centrar los cuadros del medio. espero me ayuden, muchas gracias! http://codepen.io/FernandoSosa/pen/MwOWXR...
  #1 (permalink)  
Antiguo 22/06/2015, 14:24
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
centrado de varios div con efecto flip

Hola dejo un codepen donde no puedo centrar los cuadros del medio.
espero me ayuden, muchas gracias!
http://codepen.io/FernandoSosa/pen/MwOWXR
  #2 (permalink)  
Antiguo 22/06/2015, 15:04
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: centrado de varios div con efecto flip

Pon también el código en el foro por favor.
__________________
(:
  #3 (permalink)  
Antiguo 22/06/2015, 15:51
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
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. }
  #4 (permalink)  
Antiguo 23/06/2015, 12:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 4 meses
Puntos: 1146
Respuesta: centrado de varios div con efecto flip

Los elementos que usan float no se pueden centrar, usa en su lugar display:inline-block
  #5 (permalink)  
Antiguo 23/06/2015, 13:05
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: centrado de varios div con efecto flip

Entiendo lo que me explicas, pero al aplicarlo no queda bien.
Donde debería estar? los suplanté pero no se solucionó.
Gracias!
  #6 (permalink)  
Antiguo 27/06/2015, 16:25
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: centrado de varios div con efecto flip

Entiendo lo que me explicas, pero al aplicarlo no queda bien.
Donde debería estar? los suplanté pero no se solucionó.
Gracias!
  #7 (permalink)  
Antiguo 27/06/2015, 20:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 4 meses
Puntos: 1146
Respuesta: centrado de varios div con efecto flip

Como has de saber no somos adivinos, si no muestras el código no podemos saber como lo has dejado después de la modificación.

Porque dices que no queda bien? que error o defecto le ves?

Etiquetas: efecto, flip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:07.