css中的视距perspective和视差效果

概述

之前觉得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篇关于视差效果的文章，很有启发性：

视差滚动效果原理解析和效果实现
小tip: 纯CSS实现视差滚动效果

转载于:https://www.cnblogs.com/yangzhou33/p/9375137.html