概述
之前觉得2个效果很叼，一个是3D翻转效果，另一个是视差效果。今天好好的研究一下，把心得记录下来，供以后开发时参考，相信对其他人也有用。
3D翻转
3D翻转效果其实非常简单，其实就是perspective属性的一个运用。perspective属性就是视距的意思。下面是一个鼠标放上去图片就会翻转的小示例，看看就会了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
}
i {
display: block;
width: 100%;
height: 100%;
box-shadow: 10px 10px 150px #5fbdff;
transition: all 2s;
-webkit-transform: perspective(800px);
-ms-transform: perspective(800px);
-o-transform: perspective(800px);
transform: perspective(800px);
}
div:hover i {
-webkit-transform: perspective(800px) rotateY(180deg);
-ms-transform: perspective(800px) rotateY(180deg);
-o-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
</style>
</head>
<body>
<div>
<i></i>
</div>
</body>
</html>
这里有一个更加好看的开门效果例子。
视差效果
所谓的视差效果，就是在鼠标或滚轮进行移动的时候，多层次的背景进行不同程度的变换（有的是位移，有的是翻转等）。
这里有一个鼠标位移进行翻转视差的例子，主要是监听鼠标进入元素并移动的事件，检查鼠标在元素内部的位置，从而进行不同程度的翻转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
color: white;
font-family: sans-serif;
font-size: 1.8em;
display: flex;
align-items: center;
justify-content: center;
}
.content {
margin: 1px;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
</style>
</head>
<body>
<div class="wowpanel">
<div class="content">move</div>
</div>
<div class="wowpanel">
<div class="content">your</div>
</div>
<div class="wowpanel">
<div class="content">cursor</div>
</div>
<div class="wowpanel">
<div class="content">over</div>
</div>
<script>
const ANGLE = 45;
let wowpanels = document.querySelectorAll(".wowpanel");
let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];
wowpanels.forEach((element, i) => {
floatable(element, colors[i]);
});
function floatable (panel, color) {
let content = panel.querySelector(".content");
content.style.backgroundColor = color;
panel.addEventListener('mouseout', e => {
content.style.transform = `perspective(300px)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)`;
});
panel.addEventListener('mousemove', e => {
let w = panel.clientWidth;
let h = panel.clientHeight;
let y = (e.offsetX - w * 0.5) / w * ANGLE;
let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;
content.style.transform = `perspective(300px)
rotateX(${x}deg)
rotateY(${y}deg)`;
});
}
</script>
</body>
</html>
类似地，我们也可以不用翻转，而是用位移。当鼠标向左移动的时候，图片向右移动；当鼠标向右移动的时候，图片向左移动；当鼠标向上移动的时候，图片向下移动等等，这样就能做出比较好看的位移视差效果了。
这里有2篇关于视差效果的文章，很有启发性：