柳意梧情

心在哪里收获就在哪里
加载
首页 » 建站教程 » CSS3 3D倾斜视差图片展示特效代码

CSS3 3D倾斜视差图片展示特效代码

CSS3 3D倾斜视差图片展示特效.png
下面是HTML代码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 3D倾斜视差图片展示特效</title>

<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
html, body {
  height: 100%;
}

body {
  align-items: center;
  background: #642B73;
  background: linear-gradient(to bottom, #C6426E, #642B73);
  display: flex;
  font-family: 'Open Sans', sans;
  justify-content: center;
  overflow: hidden;
  -webkit-perspective: 1800px;
          perspective: 1800px;
  text-align: center;
  margin: 0 20px;
}

h1 {
  color: #3e3e42;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 30px;
  -webkit-transform: translateZ(35px);
          transform: translateZ(35px);
}

h3 {
  color: #eb285d;
  font-size: 16px;
  margin-bottom: 6px;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
}

.cards {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
  display: inline-block;
  padding: 30px 35px;
  -webkit-perspective: 1800px;
          perspective: 1800px;
  text-align: left;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(11deg) rotateY(16.5deg);
          transform: rotateX(11deg) rotateY(16.5deg);
  min-width: 595px;
}

.card {
  border-radius: 15px;
  box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
  display: inline-block;
  height: 250px;
  overflow: hidden;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translatez(35px);
          transform: translatez(35px);
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  width: 175px;
  text-align: center;
}
.card:not(:last-child) {
  margin-right: 30px;
}

.card__img {
  position: relative;
  height: 100%;
}

.card__bg {
  bottom: -50px;
  left: -50px;
  position: absolute;
  right: -50px;
  top: -50px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateZ(-50px);
          transform: translateZ(-50px);
  z-index: 0;
}

.card__one .card__img {
  top: 14px;
  right: -10px;
  height: 110%;
}
.card__one .card__bg {
  background: url("https://blog.liuyiwuqing.cn/content/uploadfile/201906/169f1559740313.jpg") center/cover no-repeat;
}

.card__two .card__img {
  top: 25px;
}
.card__two .card__bg {
  background: url("https://blog.liuyiwuqing.cn/content/uploadfile/201906/089a1559740313.jpg") center/cover no-repeat;
}

.card__three .card__img {
  top: 5px;
  left: -4px;
  height: 110%;
}
.card__three .card__bg {
  background: url("https://blog.liuyiwuqing.cn/content/uploadfile/201906/dd9b1559740295.jpg") center/cover no-repeat;
}

.card__text {
  align-items: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 70px;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.card__title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
  margin-bottom: 3px;
}

.notice {
  background: gold;
  border-top-left-radius: 6px;
  bottom: 0;
  font-family: monospace;
  font-size: 14px;
  padding: 8px 10px;
  position: absolute;
  right: -20px;
}

.twitter__link {
  cursor: pointer;
  position: absolute;
  right: -10px;
  top: 12px;
  z-index: -1;
  background: #00aced;
  border-radius: 20px;
  height: 30px;
  text-decoration: none;
  padding-right: 10px;
  justify-content: space-between;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  width: 74px;
  opacity: 0.15;
}
.twitter__link:hover {
  opacity: 1;
}

.twitter__icon {
  height: 30px;
}
</style>
</head>
<body>
<div class="cards">
  <h3>Movies</h3>
  <h1>Popular</h1>
  <div class="card card__one">
    <div class="card__bg"></div>
    <img class="card__img" src="https://blog.liuyiwuqing.cn/content/uploadfile/201906/4a471559740295.png" />
    <div class="card__text">
      <p class="card__title">Princess Mononoke</p>
    </div>
  </div>
  <div class="card card__two">
    <div class="card__bg"></div>
    <img class="card__img" src="https://blog.liuyiwuqing.cn/content/uploadfile/201906/fb5c1559740337.png" />
    <div class="card__text">
      <p class="card__title">Spirited Away</p>
    </div>
  </div>
  <div class="card card__three">
    <div class="card__bg"></div>
    <img class="card__img" src="https://blog.liuyiwuqing.cn/content/uploadfile/201906/10fb1559740313.png" />
    <div class="card__text">
      <p class="card__title">Howl's Moving Castle</p>
    </div>
  </div>
</div>


<script>
var cards = document.querySelector(".cards");
var images = document.querySelectorAll(".card__img");
var backgrounds = document.querySelectorAll(".card__bg");
var range = 40;

// const calcValue = (a, b) => (((a * 100) / b) * (range / 100) -(range / 2)).toFixed(1);
var calcValue = function calcValue(a, b) {return (a / b * range - range / 2).toFixed(1);}; // thanks @alice-mx

var timeout = void 0;
document.addEventListener('mousemove', function (_ref) {var x = _ref.x,y = _ref.y;
  if (timeout) {
    window.cancelAnimationFrame(timeout);
  }

  timeout = window.requestAnimationFrame(function () {
    var yValue = calcValue(y, window.innerHeight);
    var xValue = calcValue(x, window.innerWidth);
    console.log(xValue, yValue);
    cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";

    [].forEach.call(images, function (image) {
      image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)";
    });

    [].forEach.call(backgrounds, function (background) {
      background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px";
    });
  });
}, false);
</script>

</body>
</html>


收录详情:百度已收录
版权声明:本文内容源自互联网,由(柳意梧情)整编。
文章标题:CSS3 3D倾斜视差图片展示特效代码
本文地址:https://blog.liuyiwuqing.cn/Site/123.html
本文最后更新于2019-6-7,已超过半年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
版权所有,转载注意明处:柳意梧情博客 » CSS3 3D倾斜视差图片展示特效代码

WRITTEN BY:柳意梧情

avatar

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

1464sitemap