Pure CSS3 rotates with two sides

Question

So, I played with CSS3 and HTML5 on my page , trying to keep abreast of the latest developments. I was playing with the rotateY setting of the new CSS transformation, and I was wondering if there is a way to flip something that has two different sides, but using only CSS and HTML. I searched on the Internet and did not find textbooks.

Anyway, I came up with this. (You can also find the link above at the bottom of the page.)

Of course, to see this effect, you need to view it in the Webkit browser.

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); } 

Yes, I understand that there is probably too much markup for such a simple action, but I wanted to see if this is possible.

So my question is: I came up with this technique, but is there a more efficient, more efficient one that I have not found? Or is there a better / more efficient way to do what I did?

thanks

Answer 1

What about:

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; } 

Answer 2

I think you are looking for -webkit-backface-visibility . However, this is a specific webkit, but not in any standards.

Answer 3

This works for me;

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; Its a diagonal flip.

Answer 4

I was looking for information on what to add to the -webkit-transition-property to indicate that I wanted to rotate the element, so thanks for that :)

Paul Bakaus has a nice flip animation for the iPhone, it includes javascript (and jQuery) to flip at the click of a button: http://paulbakaus.com/lab/css/flip/