JS和CSS3炫酷3D卡片视觉差动画特效

这是一款JS和CSS3炫酷3D卡片视觉差动画特效。该卡片特效在鼠标滑过卡片时，卡片的标题和卡片图片之间，会有炫酷的3D视觉差效果，给人以立体的视觉效果。

使用方法

HTML代码

<div class="wrapper">
    <div class="panel">
        <div class="panel__content-col">
            <div class="panel__content">
                <div class="panel__text">
                    <h1 class="panel__title">Tap House</h1>
                    <p class="panel__addr"><span></span>60 Ranelagh Village, Dublin</p>
                </div>
                <div class="panel__line"></div>
            </div>
        </div>
        <div class="panel__img-col">
            <img src="./img/taphouse.jpg" alt="" class="panel__img">
        </div>
    </div>
</div>
		

CSS代码

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #292929;
  color: white;
  font-size: 18px;
  font-feature-settings: "kern" 1, "liga" 1, "frac" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


p {
  font-family: "Lato", sans-serif;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5vh 5%;
}

.panel {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1200px;
  height: 466px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

.panel__content-col {
  flex-basis: 25%;
}

.panel__content {
  position: absolute;
  top: 26%;
  left: 0;
  z-index: 2;
  width: 100%;
}

.panel__text {
  display: inline-block;
  text-align: right;
}

.panel__img-col {
  flex-basis: 70%;
  box-shadow: 0px 20px 100.28px 8.72px rgba(0, 0, 0, 0.35);
}

.panel__title {
  margin: 0;
/*    font-family: "Playfair Display", serif;*/
  font-size: 96px;
    font-weight: 900;
}

.panel__addr {
  position: relative;
  display: flex;
  margin: 16px 0 0;
  justify-content: flex-end;
}
.panel__addr span {
  display: block;
  margin: 9px 14px 0 0;
  height: 1px;
  width: 30px;
  background-color: #fff;
}

.panel__line {
  width: 64%;
  height: 3px;
  margin: 24px 0 0 36%;
  background-color: #fff;
}

.panel__img-col {
  width: 100%;
}

.panel__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
		

JS代码

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
    var $body = $('body'),
        $panel = $('.panel'),
        $pContent = $('.panel__content'),
        $img = $('.panel__img-col');

    function initTilt() {
        TweenMax.set([$pContent, $img], {
            transformStyle: "preserve-3d"
        });

        $body.mousemove(function(e) {
            tilt(e.pageX, e.pageY);
        });
    };

    function tilt(cx, cy) {
        // var sxPos = cx / $panel.width() * 100 - 100;
        // var syPos = cy / $panel.height() * 100 - 100;
        var sxPos = (cx / $body.width() * 100 - 50) * 2;
        var syPos = (cy / $body.height() * 100 - 50) * 2;
        TweenMax.to($pContent, 2, {
            rotationY: -0.03 * sxPos,
            rotationX: 0.03 * syPos,
            transformPerspective: 500,
            transformOrigin: "center center -400",
            ease: Expo.easeOut
        });

        TweenMax.to($img, 2, {
            rotationY: -0.03 * sxPos,
            rotationX: 0.03 * syPos,
            transformPerspective: 500,
            transformOrigin: "center center -200",
            ease: Expo.easeOut
        });

    }

    $body.mouseleave(function() {
        tilt($body.width() / 2, $body.height() / 2);
    });

    initTilt();

</script>			
		

codepen网址：https://codepen.io/petebarr/pen/GvKgvQ