Foros del Web » Creando para Internet » CSS »

efecto flip

Estas en el tema de efecto flip en el foro de CSS en Foros del Web. Hola gente. quisiera saber del efecto flip. o sea un cuadro (div) que tenga u contenido, y al pasar el mouse se de vuelta con ...
  #1 (permalink)  
Antiguo 27/05/2014, 15:20
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
Información efecto flip

Hola gente. quisiera saber del efecto flip. o sea un cuadro (div) que tenga u contenido, y al pasar el mouse se de vuelta con otro contenido.
a su vez que regrese a su estado después de pasado el mouse.
y algo de transparencia mejor.

algo así.
http://www.lynda.com/?co=2



gracias!
  #2 (permalink)  
Antiguo 27/05/2014, 16:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: efecto flip

Primer resultado en Google: http://davidwalsh.name/css-flip
  #3 (permalink)  
Antiguo 27/05/2014, 17:51
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: efecto flip

gracias!
lo tengo bien a los códigos, el problema era (y es) que estaba probando en el explorer y no funciona. ahora a ver como soluciono eso.
  #4 (permalink)  
Antiguo 27/05/2014, 18:32
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: efecto flip

solucioné lo de IE ahora sigue sin girar la imagen en chrome
  #5 (permalink)  
Antiguo 28/05/2014, 00:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: efecto flip

Sin que publiques el código será difícil saber el porqué.
  #6 (permalink)  
Antiguo 28/05/2014, 04:17
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 8 años, 1 mes
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
  #7 (permalink)  
Antiguo 28/05/2014, 04:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: efecto flip

¿Tienes puestos los prefijos propietarios?

Tal como pusiste el código (no digo sin usar la opción de highlight) parece que no sabes muy bien cómo funciona o qué es lo que hace. No estaría mal revisar eso para comprender el funcionamiento.

Etiquetas: contenido, 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:53.