css3实现的3D图片展示效果

      CSS3的趋势越来越近了，相信前面的你使用的safari浏览器，火狐都已经支持了，里面的一些CSS3实现的特效貌似都已经代替javascript代码了，flash更不用说了，直接被替代掉了。

      废话不多说了，大家来看今天我给大家推荐的第一篇特效代码，截图如下：

 

     

      打开后，图片会自己在那里闪动，很立体

代码也是很简单修改的，只要调用几个JS，除此外加如下一段代码即可

 <div id="container">
   
    <div class="wrapper-item">
     <div class="left">
        <img src="images/item/blogfolio.jpg" alt="Blogfolio" />
        <img src="images/item/folo.jpg" alt="Folo" />
      </div>
      <span class="text">Lot of awesome themes! <br/> Download the lovely one! </span>
      <div class="right">
        <img src="images/item/grido.jpg" alt="Grido" />
        <img src="images/item/itheme2.jpg" alt="Itheme2" />
      </div>
    </div>
    <div class="wrapper-item">
      <div class="left">
        <img src="images/item/koi.jpg" alt="Koi" />
        <img src="images/item/notes.jpg" alt="Notes" />
      </div>
      <span class="text">You can choose skin too! <br/> Choose the one you love! </span>
      <div class="right">
        <img src="images/item/shopdock.jpg" alt="Shopdock" />
        <img src="images/item/wumblr.jpg" alt="Wumblr" />
      </div>
    </div>
   
    <nav id="navigation">
      <a href="#1" class="nav selected">1</a>
      <a href="#2" class="nav">2</a>
    </nav>
    <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
    <h1>Showcase Product Feature in 3D Style</h1>
    <em><a href="http://www.lanrenzhijia.com">&bull; read tutorial &bull;</a></em>
   
  </div> 

 

      下载地址： http://www.lanrenzhijia.com/js/css3/2012/0715/572.html

      预览地址： http://www.lanrenzhijia.com/yulan/264/

      记得在支持CSS3版本浏览器下查看哦