LI -> A -> SPAN. This is necessary to create the desired effect. When the mouse rolls over the outer LI parent, we rotate both the inner A and SPAN elements 180 degrees using CSS3 transform's rotateY(180deg)value. The key here is to declare this value on both of the inner elements, so while the child Aelement causes any content inside to appear as a mirror of itself when rotated, the grand child SPANelement restores the content back to its proper orientation.
Use the following html:
[html]
<ul class="flipboard">
<li><a href="http://www.dynamicdrive.com"><span>d</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>r</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>i</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>v</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>e</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>n</span></a></li>
</ul>
<br /><br /><br />
<ul class="flipboard">
<li><a href="http://www.dynamicdrive.com"><span><img src="media/rss-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/twitter-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/facebook-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/google-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/stumble-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/yahoo-heart.png" /></span></a></li>
</ul>
[/html]
Apply the following css:
[css]
<style>
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard li{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a img{
border-width: 0;
}
ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
[/css]Revisions
- May 2, 2013 @ 11:35:33 [Current Revision] by PeterLugg
- May 2, 2013 @ 11:25:07 [Autosave] by PeterLugg
- May 2, 2013 @ 11:20:03 by PeterLugg
Revision Differences
| May 2, 2013 @ 11:20:03 | Current Revision | ||
|---|---|---|---|
| Title | |||
| Deleted: | Added: Rotating CSS3 icons | ||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.