css3 翻牌实现

一、css3过渡属性transition理解：

transition指的是页面元素某种属性从状态A过渡变化（非立即跳跃）到状态B，以及这种过渡所需要的时间（包括设定过渡延迟时间等等）。

 

其实就是两张图片，一张在前，一张在后，当前面的那张发生旋转后，转到一定角度时后面的图片就会跟着它的步伐一起旋转

首先，我们在html中有这样一个布局：

<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

 

类outer是最外层div ,假设宽度为500*500, 那么类div1,div2也是铺满整个区域，div1为前背景， div2为后背景，（z-index）

要使定位，使两个div显示在一个区域，绝对定位position: absolute;

    .outer{
      width: 510px;
      height: 500px;
    }

    .outer div{
      width:510px;
      height: 500px;
      position: absolute;
      transform-style: preserve-3d;
      backface-visibility:hidden;  //隐藏被旋转的区域 180都可以见
      transition:all 2s;  // 过渡动画时长
    }

 

 

位置定好，实现翻牌效果使用css3 的 transform: rotateY 沿着Y轴旋转。

当鼠标移动最外层类outer上实现旋转效果

默认样式/初始化

   .div1{
      background: url("images/1.jpg");
      transform:rotateY(0);
    }
    .div2{
      background: url("images/2.jpg") no-repeat;
      transform:rotateY(-180deg); // 上边添加属性  ‘backface-visibility:hidden;’ 此时不可以见

}

 .outer:hover .div1{
      transform:rotateY(-180deg);  // 不可见
    }
    .outer:hover .div2{
      transform:rotateY(0deg);
    }

 

点击翻牌，同理：

添加样式 flip 下的div1或div2执行动画

    .outer.flip .div1{
      transform:rotateY(-180deg);
    }
    .outer.flip .div2{
      transform:rotateY(-180deg);
    }