css3 3d特效汇总

本篇全是实战，没有基础，如果不明白3d特效的原理，可能会看不懂，不过没关系，给你推荐一下张鑫旭css3 3d转换，或者看我的另一篇博客 css3 2d转换3d转换以及动画的知识点汇总，看完这些3d特效的原理基本就没问题了，下面实战开始

第一个：3d按钮 hover上下翻效果

dom结构

<figure>
  <div>
    <span class="face">Hover Me</span>
    <span class="face">Button</span>
  </div>
</figure>

原理：把两个span弄成方块，给figure绑定 hover： hover 时 div 绕x旋转

figure:hover div {
    transform: rotateX(-90deg);
}

span.face:nth-child(1) {
  color: #fff;
  transform: translate3d(0, 0, 30px);
  -webkit-transform: translate3d(0, 0, 30px);
}

span.face:nth-child(2) {
  color: #094b2c;
  background: #fff;
  transform: rotateX(90deg) translate3d(0, 0, 30px);
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}