CSS3实现超酷的图像动画变换特效

haozitwwwcssscn 2013-05-16

日期:2013-5-15  来源:GBin1.com

CSS3实现超酷的图像动画变换特效

在线演示

在线演示

在线下载

今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery

怎样起作用的?

CSS3实现超酷的图像动画变换特效

给定一组图片,我们使用te-cover将添加第一个图片到包装器中。使用JavaScript控制过渡类,显示在te-transition包装器中的图片。这是第一个例子:

<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>

CSS3实现超酷的图像动画变换特效

相关阅读:

由纯CSS3实现的超酷飞行状下拉菜单特效

via 极客社区 

来源:CSS3实现超酷的图像动画变换特效

相关推荐