CSS3和JS炫酷3D拖拽卡片动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款使用CSS3和纯JavaScript制作的炫酷3D卡片拖拽特效。用户可以通过鼠标拖拽卡片，卡片在拖拽的过程中会发生3D变形，并且带有音效，效果非常炫酷。

由于IE浏览器不支持transform-style: preserve-3d;属性，所以该特效在IE浏览器中没有效果。

使用方法

HTML结构

该特效使用一个<div>作为容器，里面放置需要进行拖拽的卡片图片。

<div class="card">
  <img src="img/hearthstone-ragnaros.png" class="card-image" draggable="false">
</div>

CSS样式

该卡片拖拽特效中使用了自定义的鼠标光标，要自定义鼠标光标的样式，可以在body元素中通过cursor属性来设置。

body {
  background: #66677c;
  cursor: url(../img/hearthstone-cursor.png) 10 2, auto;
  overflow: hidden;
}
body:active {
  cursor: url(../img/hearthstone-click.png) 10 2, auto;
}

卡片容器使用绝对定位，开始时位于视口的左上角位置。它被设置了固定的宽度250像素。并将它制作为3D透视空间，透视的为400像素。will-change属性用于告诉浏览器优化即将执行的transform动画。user-select属性用于禁止优化选择文本。user-drag属性用于设置元素不能被拖动，在选中它后才以拖拽。

.card {
  left: 0;
  top: 0;
  -webkit-perspective: 400px;
               perspective: 400px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
               transform-style: preserve-3d;
  will-change: transform;
  width: 250px;
  
  -webkit-user-select: none;
      -moz-user-select: none;
        -ms-user-select: none;
               user-select: none;
  
  -webkit-user-drag: none;
               user-drag: none;
}

卡片被鼠标按下后光标变为拳头状。

.card:active {
  cursor: url(../img/hearthstone-grab.png) 10 2, auto;
}

容器中的卡片图片的设置和容器相同。

.card-image {
  display: block;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
  width: 100%;
  will-change: transform;
  user-drag: none;
  -webkit-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
             user-select: none;
  
  -webkit-user-drag: none;
  user-drag: none;
}

JavaScript

特效中使用JavaScript来处理优化和卡片的交互。由于不考虑在IE浏览器中使用该特效的情况，JS代码中使用DOM2级事件处理程序 addEventListener来监听事件。主要为卡片和浏览器窗口绑定了下面的一些事件：

function bindevents() {
  card.addEventListener( 'mousedown', onmousedown );
  window.addEventListener( 'mouseup', onmouseup );
  window.addEventListener( 'mousemove', onmousemove );
  window.addEventListener( 'resize', onresize );
}

完整的JavaScript实现代码请参考下载文件。