CSS rotation lente
.badge {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
width: 100%;
height: 100%;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
.product-action {
display: inline-block;
}
.product-action:hover .back {
-webkit-transform: rotateY(0deg);
}
.product-action:hover .front {
-webkit-transform: rotateY(-180deg);
}
... fonctionne, mais retourne trop lent, puis-je changer la vitesse?
Aussi, puis-je ajouter de la largeur d'une certaine manière donc le flip ressemble à un conseil et non pas un mince papier? 🙂
Merci!
OriginalL'auteur 3zzy | 2012-09-16
Vous devez vous connecter pour publier un commentaire.
Vous avez spécifié la vitesse déjà:
De le changer pour quelque chose comme
0.3s
: http://jsfiddle.net/egEq2/1/Vous pourriez donner la carte d'une couleur d'arrière-plan ou à la frontière. Sans cela, il n'a pas l'air de rotation: jsfiddle.net/egEq2/2
OriginalL'auteur Blender