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

PetitQ 图片/图形 2018-11-15 1.42K 0 0

这是一款效果非常炫酷的 jQuery 和 CSS3 鼠标滑过 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');

```
    });
```
```
}
```
```
});
```

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

已有 355 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

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

制作方法

HTML 结构

CSS 样式

JAVASCRIPT

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

相关文章

全屏背景图片无限循环缩放jQuery特效

响应式网格图片画廊jQuery特效插件

jQuery+CSS3可互动的背景视觉差效果

发表回复取消回复

热销模板

图片/图形

制作方法

HTML 结构

CSS 样式

JAVASCRIPT

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复