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

Wow, c'est impressionnant! Il peut y avoir certains jQuery solutions, mais je dirais que c'était très bien fait!
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

css css3

Comment sur:

HTML

<div class="flip1">
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
</div>
<div class="flip2">
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
</div>

CSS

div {
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
-webkit-backface-visibility: hidden;
color: blue;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
padding: 20px;
position: absolute;
}
@-webkit-keyframes flip1 {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: rotateX(360deg); }
}
div.flip1 {
-webkit-animation-name: flip1;
}
@-webkit-keyframes flip2 {
from { -webkit-transform: rotateX(-180deg); }
to { -webkit-transform: rotateX(180deg); }
}
div.flip2 {
-webkit-animation-name: flip2;
}

démo de ce qui précède, pour les curieux: jsfiddle.net/philfreo/fwxQK
Merci, @philfreo

OriginalL'auteur Mike

2

Je pense que ce que vous cherchez est -webkit-backface-visibilité. C'est webkit spécifiques, cependant, et pas dans toutes les normes.

Merci, c'est très utile. Je vais avoir à jouer avec pour voir comment il s'intègre dans l'idée que j'ai. P. S. Quelle coïncidence, je viens juste de commencé à vous suivre sur Twitter.

OriginalL'auteur David Storey

Cela fonctionne pour moi;

HTML

<li class="panel">
<div class="cards">
<div class="front">
<div id="side1"></div>
</div>
<div class="back">
<div class="side2">
</div>
</div>
</div>
</li>

CSS

.panel {
width: 300px;
height: 300px;
position: relative;  
-webkit-perspective: 1000;
&:not(:hover) .cards {
-webkit-animation: CardFlip 15s infinite;
-webkit-transform-style: preserve-3d;
}
.cards, .front, .back {
position: absolute;
top: 0;
left: 0;
bottom: 20px;
right: 0;
}
.cards {
-webkit-transition: all 20s linear;
.front {
z-index: 2;
background: url('placeholder.png');
-webkit-backface-visibility: hidden;
}
.back {
z-index: 1;
-webkit-transform: scale(-1, 1);
}
}
}

Note; Sa diagonale flip.

OriginalL'auteur

0

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

Vous devez vous connecter pour publier un commentaire.