Databases
StackOverflow2013
Postsdbo
POPure CSS3 rotateY flip with two sides
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPure CSS3 rotateY flip with two sides
    text
    copied!<p>So I was playing around with CSS3 and HTML5 <a href="http://www.heyvian.com/html5-css3/" rel="nofollow">on my page</a> trying to keep up to date. I was playing with the rotateY setting of the new CSS transform and I was wondering if there was a way to flip something over that it has two different sides but using only CSS and HTML. I searched the Internet and didn't find any tutorials.</p> <p>Anyway, I came up with this. (Can also be found at the link above, near the bottom of the page.)</p> <p><em>Of course, to see this effect, it must be viewed in a Webkit browser.</em></p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="flip"&gt; &lt;div&gt; &lt;img src="images/yyc.jpg" alt="Calgary International Airport"/&gt; &lt;section&gt; &lt;h3&gt;Image Metadata&lt;/h3&gt; &lt;p&gt;&lt;strong&gt;Where:&lt;/strong&gt; Calgary International Airport&lt;/p&gt; &lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; July 25, 2008&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Camera:&lt;/strong&gt; Canon EOS 30D&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Photographer:&lt;/strong&gt; &lt;a href="http://photo.net/photos/Vian" title="Photo.net"&gt;Vian Esterhuizen&lt;/a&gt;&lt;/p&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.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 &gt; 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 &gt; div img{ float:left; width:421px; height:237px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0; -webkit-transition-delay: 0.3s; } .flip &gt; div &gt; 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 &gt; div{ left:-421px; } .flip:hover &gt; div img, .flip:hover &gt; div &gt; section{ -webkit-transform: rotateY(180deg); } </code></pre> <p><em>Yes, I realize that's probably way too much markup for such a simple action but I wanted to see if it's possible.</em> </p> <p>So my question is, I made up this technique, but is there a better, more efficient one out there that I didn't find? Or, is there a better/more efficient way to do what I did?</p> <p>Thank you</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload