Skip to content

Instantly share code, notes, and snippets.

@lgmcolin

lgmcolin/reversal

Created December 25, 2013 10:03
Show Gist options
  • Save lgmcolin/8121876 to your computer and use it in GitHub Desktop.
Save lgmcolin/8121876 to your computer and use it in GitHub Desktop.
Download ZIP
css3 transform实现简单翻转
Raw
reversal
/**
part of html
<div id="box">
<div id="preserve-box">
<div class="front">我是正面</div>
<div class="bottom">我是反面</div>
</div>
</div>
**/
/* part of css*/
* {
margin: 0;
padding: 0;
}
#box{
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;
-webkit-perspective: 800px;
}
.front,.bottom{
position: absolute;
left: 0;
top: 0;
width: 180px;
height: 180px;
text-align: center;
line-height: 180px;
-webkit-border-radius: 90px 90px;
border-radius: 90px 90px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#preserve-box .front{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: #56BEF5;
}
#preserve-box:hover .front{
-webkit-transform: rotateY(180deg);
}
#preserve-box .bottom{
background: #FD99E9;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(-180deg);
}
#preserve-box:hover .bottom{
-webkit-transform: rotateY(0deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment