特效描述：利用CSS3實(shí)現(xiàn) 3D傾斜 視差圖片 展示特效。利用CSS3實(shí)現(xiàn)3D傾斜視差圖片展示特效

代碼結(jié)構(gòu)

1. HTML代碼

Movies

Popular

Princess Mononoke

Spirited Away

Howl's Moving Castle

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);

總結(jié)

以上是生活随笔為你收集整理的css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。