Pure CSS3 rotateY flip avec deux côtés
Donc j'ai été jouer avec le CSS3 et le HTML5 sur ma page essayer de le tenir à jour. Je jouais avec le rotateY réglage de la nouvelle CSS transformer et je me demandais si il y avait un moyen de retourner quelque chose de plus qu'elle a deux faces différentes, mais en utilisant seulement le CSS et le HTML. J'ai cherché sur Internet et n'ai pas trouvé de tutoriels.
De toute façon, je suis venu avec cette. (Peut également être trouvé sur le lien ci-dessus, près du bas de la page.)
Bien sûr, pour voir cet effet, il doit être affiché dans un navigateur Webkit.
HTML
<div class="flip">
<div>
<img src="images/yyc.jpg" alt="Calgary International Airport"/>
<section>
<h3>Image Metadata</h3>
<p><strong>Where:</strong> Calgary International Airport</p>
<p><strong>When:</strong> July 25, 2008</p>
<p><strong>Camera:</strong> Canon EOS 30D</p>
<p><strong>Photographer:</strong> <a href="http://photo.net/photos/Vian" title="Photo.net">Vian Esterhuizen</a></p>
</section>
</div>
</div>
CSS
.flip{
float:left;
position:relative;
width:421px;
height:237px;
background:#111;
border:2px solid #111;
margin:2px 0;
-webkit-transition-property: -webkit-transform, background;
-webkit-transition-duration: 1s, 0;
-webkit-transition-delay: 0, 0.3s;
overflow:hidden;
}
.flip:hover{
-webkit-transform: rotateY(180deg);
}
.flip > div{
position:absolute;
left:0;
top:0;
width:842px;
height:237px;
overflow:hidden;
-webkit-transition-property: left;
-webkit-transition-duration: 0;
-webkit-transition-delay: 0.3s;
}
.flip > div img{
float:left;
width:421px;
height:237px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0;
-webkit-transition-delay: 0.3s;
}
.flip > div > section{
float:left;
width:401px;
height:217px;
padding:10px;
background:top right url('../images/esterhuizen-photography.gif') no-repeat;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0;
-webkit-transition-delay: 0.3s;
}
.flip:hover > div{
left:-421px;
}
.flip:hover > div img, .flip:hover > div > section{
-webkit-transform: rotateY(180deg);
}
Oui, je me rends compte que c'est probablement de trop de balisage pour une action simple, mais je voulais voir si c'est possible.
Donc ma question est, j'ai fait cette technique, mais est-il une meilleure, plus efficace que je ne l'ai pas trouvé? Ou, est-il un meilleur/le plus efficace de faire ce que j'ai fait?
Merci
Eh bien je vous remercie. J'ai vu des tas de jQuery options, mais j'ai été convaincu qu'il y a un moyen de le faire sans.
OriginalL'auteur Vian Esterhuizen | 2010-10-04
Vous devez vous connecter pour publier un commentaire.
Comment sur:
HTML
CSS
Merci, @philfreo
OriginalL'auteur Mike
Je pense que ce que vous cherchez est -webkit-backface-visibilité. C'est webkit spécifiques, cependant, et pas dans toutes les normes.
OriginalL'auteur David Storey
Cela fonctionne pour moi;
HTML
CSS
Note; Sa diagonale flip.
OriginalL'auteur
J'ai été googler pour ce mettre dans l'-webkit-transition-property à préciser que je voulais faire pivoter un élément, donc merci pour ça 🙂
Paul Bakaus a une belle animation flip pour iPhone, il implique de javascript (et jQuery) pour faire le flip quand un bouton est pressé:
http://paulbakaus.com/lab/css/flip/
OriginalL'auteur Mogens Beltoft