css3 卡片翻转效果。主要通过rotateY把一面翻转到背面，然后通过backface-visibility:hidden，背面隐藏。
- .box div{
- height: 200px;width:300px;
- position: absolute; left: 0px; top: 0px;
- backface-visibility:hidden;
- transition-duration: 0.4s;
- }
- .box div:first-child{
- background: red;
- transform:rotateY(0deg);
- }
- .box div:last-child{
- background: green;
- transform:rotateY(-180deg);
- }
通过点击的时候，把另一面在隐藏。
- .box.turn div:first-child{
- transform:rotateY(180deg);
- }
- .box.turn div:last-child{
- transform:rotateY(0deg);
- }
点击效果：
正
反
鼠标hover效果：
正
反