纯CSS实现3D翻牌效果

whqet

于 2014-02-23 14:53:51 发布

阅读量1.4w

点赞数 6

分类专栏： less&sass css3 CSS3演武场文章标签： css3 pure css 前端开发 CSS Flip 翻牌

本文链接：https://blog.csdn.net/whqet/article/details/19755013

版权

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。

简易效果请大家狠戳这里在线体验，或下载收藏。

改进效果请大家戳这里在线体验，或下载收藏。

html部分我们用flip类做翻转的盒子，x和y两个类分别代表垂直翻转和水平翻转。front和back两个div做翻转图像的正面和反面。

<div class="container">
  <div class="flip X">
    <div class="front" data-text="Gongfu panda"></div>
    <div class="back" data-text="Toy story"></div>
  </div>
  <div class="flip Y">
    <div class="front" data-text="Gongfu panda"></div>
    <div class="back" data-text="Toy story"></div>
  </div>
</div>

嗯，接下来看看CSS，首先我们需要布局好元素

/* 顶部的盒子 */
.container{
  width:1320px;
  margin:50px auto;
}
/* 翻转类样式 */
.flip{
  width:640px;
  height: 320px;
  margin:10px;
  float:left;
  position: relative;
}
/* 前后两个类的共同样式 */
.flip div{
  width: 100%;
  height: 100%;
  p