浙江 杭州

jQuery和CSS3鼠标滑过3D卡片翻转特效

系统分类: 网页特效 - css3 - css3 变形 2017-05-25

人气2336

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的jQueryCSS3鼠标滑过3D卡片翻转特效。该卡片翻转特效使用modernizr.js来检测浏览器,当发现浏览器不支持CSS3翻转属性时,会将效果回退为简单的滑动显示效果。

制作方法

属性要引入jQuery和modernizr.min.js和jquery.easing.min.js文件。

<script src="js/modernizr.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>                
              
HTML结构

该卡片翻转效果的HTML结构采用类似图片画廊的HTML结构:

<div class="artGroup slide">
  <div class="artwork"> <img src="1.jpg">
    <div class="detail">
      <h3>Title</h3>
      <p>Details...</p>
    </div>
  </div>
</div>             
              
CSS样式

为它添加一些必要的CSS样式:

.artGroup {
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 10px 10px 10px;
  float: left;
}

.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artGroup img {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  border: 1px solid #333;
}

.artGroup .detail {
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
}

.artGroup .detail h3 {
  text-align: center;
  color: orange;
}

.artGroup .detail p {
  text-align: left;
  padding: 0 0.25em;
}                
              

下面是使用CSS3来制作卡片翻转的效果:

.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
}

.artGroup.flip .artwork {
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.artGroup.flip .detail,
.artGroup.flip .theFlip {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.artGroup.flip img,
.artGroup.flip .detail {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}                
              

在旧浏览器中,使用下面的CSS来简单实现滑动效果。

.artGroup.slide { overflow: hidden; }
.artGroup.slide .detail { bottom: -364px; }                
              
JAVASCRIPT

该卡片翻转特效使用jQuery来为相应的元素添加和删除相应的class,完成卡片翻转的效果。

$(function () {
if ( $('html').hasClass('csstransforms3d') ) {
  $('.artGroup').removeClass('slide').addClass('flip');
  $('.artGroup.flip').on('mouseenter',
    function () {
      $(this).find('.artwork').addClass('theFlip');
    });
  $('.artGroup.flip').on('mouseleave',
    function () {
      $(this).find('.artwork').removeClass('theFlip');
    });
} else {
  $('.artGroup').on('mouseenter',
    function () {
      $(this).find('.detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
    });
  $('.artGroup').on('mouseleave',
    function () {
      $(this).find('.detail').stop().animate({bottom: ($(this).height() + -1) }, 500, 'easeOutCubic');
    });
}
});              
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:255.83KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1842.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3鼠标滑过3D卡片翻转特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)