7种酷炫css3图片3d翻转效果

在这款css3图片3d翻转效果中的CSS3 3D Transforms只对webkit内核的浏览器生效。

插件中精美的卡片插图来自于花瓣。

HTML

插件的原理是：刚开始的时候显示的是te-cover div中的图片，然后在运行的时候使用javascript来切换class到te-transition的div，这个div上的图片将被显示出来。结构如下所示：

<div id="te-wrapper" class="te-wrapper">
  <div class="te-images">
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
  </div>
  <div class="te-cover">
    <img src="images/1.jpg"/>
  </div>
  <div class="te-transition">
    <div class="te-card">
      <div class="te-front"></div>
      <div class="te-back"></div>
    </div>
  </div>
</div>
                

制作这个插件的通用思路是所有刚开始显示的图片都放在te-cover中，然后选择一种效果后，开始执行动画时，te-cover被隐藏，当动画结束后，te-cover切换下一张图片后再次显示出来。