相册翻转

实现的效果

效果原型

源码

最近在做一个相册应用，相册应用有个要求，可以翻转，这就需要用到css3的旋转渐变属性；
首先说下思路，我们把每一张照片比作 一本书，书的封面有前后之分；

先把前后两张封面组装成一本书；然后在对整本书进行旋转同时书本设置保留3d转换的过度效果即可。

上代码:

<div class="wrapper">
    <div class="book to-front">
      <div class="cover cover-front">
        我是正面
      </div>
      <div class="cover cover-back">
        我是反面
      </div>
    </div>
  </div>

<style>
    /* 幕布 */
    .wrapper {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      background-color: #444;
      position: relative;

      /* 设置元素被查看位置的视图：可以理解为距离幕布的远近 */
      -webkit-perspective: 1000px;
    }

    /* 书本以及旋转动作 */
    .book {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300px;
      height: 300px;
      margin: -150px 0 0 -150px;
      background-color: #ddd;

      /* 保留3d 转换的结果 */
      transform-style: preserve-3d;
      -webkit-transition: all 1s;
    }

    /* 回到正面 */
    .to-front {
      transform: rotateY(0deg);
    }
    /* 看背面 */
    .to-back {
      transform: rotateY(180deg);
    }
    /* 封面组装 */
    .cover {
      width: 100%;
      height: 100%;
      position: absolute;
      font-size: 50px;
      /*定义元素在不面对屏幕时是否可见*/
      backface-visibility: hidden;
    }

    .cover.cover-front {
      color: #FFAEC9;
      transform: rotateY(0deg);
    }

    .cover.cover-back {
      color: #FFF200;
      transform: rotateY(180deg);
    }