css3卡牌炫酷3d排列展示_CSS3和JS炫酷3D拖拽卡片动画特效

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

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

使用方法

HTML结构

该特效使用一个

作为容器，里面放置需要进行拖拽的卡片图片。

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: