javascript - sistemas - desarrollo web completo udemy mega
Efecto Flip Card para navegadores que no sean de webkit. (5)
Así que he estado buscando el efecto de la carta invertida. Hay una serie de buenos ejemplos que funcionan bien con los navegadores webkit. Por ejemplo:
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
Pero no he encontrado ninguno que funcione con Internet Explorer / Firefox también. ¿Tal vez tienen un ejemplo donde se realiza un efecto de tirón similar?
Echa un vistazo a esta entrada de blog de David Walsh: http://davidwalsh.name/css-flip
Tiene un código excelente para crear un efecto de tapa que funciona en varios navegadores.
Estaba intentando usar este http://blog.guilhemmarty.com/flippy/ , puedes intentarlo.
Esto parece encajar el proyecto de ley ...
Cita: Flip es compatible con: Firefox, Chrome / Chromium, Opera, Safari e incluso IE (6,7,8)
Aquí hay otro ...
dev.jonraasch.com/quickflip/examples
http://jonraasch.com/blog/quickflip-2-jquery-plugin
No hay un "giro" en este, pero quizás encuentre esto útil de otra manera ...
http://malsup.com/jquery/cycle/browser.html
Este parece poderoso, pero tendrás que programar el flip tú mismo ...
Hay prefijos de moz que deberían permitirle lograr lo que está tratando de hacer.
Vea aquí: http://css3playground.com/flip-card.php
Intente agregar variantes de moz de toda la magia de -webkit aquí: http://jsfiddle.net/nicooprat/GDdtS/
O ... si está utilizando Compass ( http://compass-style.org ) y Sass (sass-lang.com) como yo, esto funciona muy bien en Chrome, Safari y FF.
HTML
<div class="flip">
<div class="card">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
En
SASS con compás mixins
( http://compass-style.org/reference/compass/css3/transform/ )
.flip
position: relative
+perspective(800)
width: 80%
height: 200px
.flip .card.flipped
+transform(rotatex(-180deg))
.flip .card
+transform-style(preserve-3d)
+transition(0.5s)
width: 100%
height: 100%
.flip .card .face
position: absolute
z-index: 2
+backface-visibility(hidden)
width: 100%
height: 100%
.flip .card .front
position: absolute
z-index: 1
.flip .card .back
+transform(rotatex(-180deg))
// Make it at least functional IE
.flip .card.flipped .back
z-index: 0
Parece que tampoco pude encontrar un buen ejemplo de esto en ningún lugar, así que pasé demasiado tiempo haciendo el mío.
Este funciona en todos los navegadores, no tiene ese extraño giro de 360 grados de IE, e incluye provisión de contenido estático (que se encuentra en ambos lados de la tarjeta, que necesitaba para colocar un botón de "giro" en la parte superior derecha de ambos lados) .
--He probado en las últimas versiones de Chrome, Firefox, Safari, Opera e IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edición: también funciona con fondos transparentes: http://jsfiddle.net/Tinclon/2ega7yLt/8/
El css (por supuesto) incluye hacks de IE, así que es un poco largo, pero el html es bastante sencillo:
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$(''.card'').hover(function(){$(''.card'').toggleClass(''applyflip'');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
border: 1px solid grey;
border-radius: 15px;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height:200px;
border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }