jquery+CSS实现的3D卡片交互效果特效源码

大家好，今天给大家介绍一款，用CSS实现的3D卡片交互效果特效源码（图1）。送给大家哦，获取方式在本文末尾。

图1

动画预览（图2）只要鼠标悬停在卡片上，即产生卡片上下左右倾斜的效果

图2

源码完整，需要的朋友可以下载学习（图3）

图3

部分代码：

var limits = 15.0;

$(".card").mousemove(function (e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top; //y position within the element.
  var offsetX = x / rect.width;
  var offsetY = y / rect.height;

  var rotateY = ((offsetX - 0) / (1 - 0)) * (limits - -limits) + -limits;
  var rotateX = ((offsetY - 0) / (1 - 0)) * (limits - -limits) + -limits;

  var shadowOffsetX = ((offsetX - 0) / (1 - 0)) * (16 - -16) + -16;
  var shadowOffsetY = ((offsetY - 0) / (1 - 0)) * (16 - -16) + -16;

  $(this).css({
    "box-shadow":
      (1 / 6) * shadowOffsetX * -1 +
      "px " +
      (1 / 6) * shadowOffsetY * -1 +
      "px 3px rgba(0, 0, 0, 0.051), " +
      (2 / 6) * shadowOffsetX * -1 +
      "px " +
      (2 / 6) * shadowOffsetY * -1 +
      "px 7.2px rgba(0, 0, 0, 0.073), " +
      (3 / 6) * shadowOffsetX * -1 +
      "px " +
      (3 / 6) * shadowOffsetY * -1 +
      "px 13.6px rgba(0, 0, 0, 0.09), " +
      (4 / 6) * shadowOffsetX * -1 +
      "px " +
      (4 / 6) * shadowOffsetY * -1 +
      "px 24.3px rgba(0, 0, 0, 0.107), " +
      (5 / 6) * shadowOffsetX * -1 +
      "px " +
      (5 / 6) * shadowOffsetY * -1 +
      "px 45.5px rgba(0, 0, 0, 0.129), " +
      shadowOffsetX * -1 +
      "px " +
      shadowOffsetY * -1 +
      "px 109px rgba(0, 0, 0, 0.18)",
    transform:
      "perspective(1000px) rotateX(" +
      -rotateX +
      "deg) rotateY(" +
      rotateY +
      "deg)"
  });

  var glarePos = rotateX + rotateY + 90;
  $(this)
    .children()
    .children()
    .css("left", glarePos + "%");
});

$(".card").mouseleave(function (e) {
  $(".card").css({"box-shadow": "0px 0px 3px rgba(0, 0, 0, 0.051), 0px 0px 7.2px rgba(0, 0, 0, 0.073), 0px 0px 13.6px rgba(0, 0, 0, 0.09), 0px 0px 24.3px rgba(0, 0, 0, 0.107), 0px 0px 45.5px rgba(0, 0, 0, 0.129), 0px 0px 109px rgba(0, 0, 0, 0.18)", "transform": "scale(1.0)"});
  $(".glare").css("left", "100%");
});

本模板编码：10121，需要的朋友，添加下面的微信公众号，搜索10121，即可获取。