StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm not sure if you're looking for a flip animation or a different kind of animation, but I don't have enough reputation to ask you to clarify.</p> <p>I've created a jsfiddle here: <a href="http://jsfiddle.net/jjordanca/dUbpN/" rel="nofollow">http://jsfiddle.net/jjordanca/dUbpN/</a></p> <p>It uses roughly the same parameters as you've given in your HTML and CSS. Note that we've moved the perspective to be in the <code>#email</code>, and that the transformation is taking place on the actual object, the <code>li</code>. I've added the <code>.green</code> and <code>.red</code> classes to make it easier to read the CSS, but this can easily be done using child and sibling selectors if you're not able or willing to add more classes.</p> <p><strong>HTML</strong></p> <pre><code><ul id="email"> <li> <div class="green" style="width:180px;height:180px;margin-bottom:10px;background-color:green"></div> <div class="red" style="width:250px;height:200px;margin-left:5px;margin-bottom:10px;background-color:red"></div> </li> </ul> </code></pre> <p><strong>CSS</strong></p> <pre><code>#email { list-style:none; margin:100px 0; height:550px; -webkit-perspective: 500; -moz-perspective: 500; position: relative; } #email li{ display: block; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; -moz-transform-style: preserve-3d; -moz-transition-property: transform; -moz-transition-duration: 0.5s; -moz-transform-origin: 25% 50%; -webkit-transform-origin: 25% 50%; } #email:hover li { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transition-property: transform; -webkit-transition-duration: 1s; -moz-transition-property: transform; -moz-transition-duration: 1s; } #email li div { display: block; position: absolute; -moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; } #email li div.red { z-index: 2; } #email li div.green { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } </code></pre>

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