3D Hover
2018-06-04 本文已影响0人
ZombieBrandg
3D Hover
persperctive
persperctive是CSS样式中调整视距，它需要在父容器使用如persperctive: 1000px;，子元素中才能配合transform:translateZ(10px);
BoundingClientRect()
语法：rectObject = object.getBoundingClientRect();
BoundingClientRect()是用来获取元素边界的位置信息。例如：
let position = divmy.getBoundingCilentRect();控制台会返回一个例如：
[object ClientRect] {
bottom: 194, //从窗口到元素底部距离
height: 194, //元素内容的高度
left: 0, //从窗口到元素左部距离
right: 242, //从窗口到元素右部距离
top: 0, //从窗口到元素顶部距离
width: 242 //元素内容的宽度
}
client
client使用来获取元素在当前视口的距离(并不是元素在页面的距离)。
page
page使用来获取元素在当前页面的距离
3D Hover 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="child">banner</div>
</div>
</body>
<style>
.parent {
width: 400px;
border: 1px solid;
padding: 80px;
perspective: 1000px; //添加视距距离
margin: 100px auto;
}
.child {
background:#2aa;
display:flex;
align-items:center;
justify-content:center;
font-size:50px;
color:white;
height: 300px;
border: 1px solid #2aa;
transition: transform 0.1s; //过度动画时间（添加该效果会很顺滑）
transform-style: preserve-3d; //增加3D效果
}
.child::after{
content:'banner';
transform:translateZ(100px);
text-shadow:5px 5px 15px #000;
opacity:0.8; //透明度
}
</style>
<script>
var divparent = document.querySelector('.parent'); //通过选择器获取parent元素
var divchild = document.querySelector('.child'); //通过选择器获取child元素
divparent.addEventListener('mousemove', function(e){ //添加对divparent元素进行事件监听(鼠标移动)
//console.log(e.clientX,e.clientY); //client可以获取鼠标位置信息
var parentPosition = divparent.getBoundingClientRect(); //获取divparent在屏幕中的位置信息
var parentX = parentPosition.left; //获取divparent元素左边部的位置信息
var parentY = parentPosition.top; //获取divparent元素顶边部的位置信息
var deltaX = e.clientX - parentX; //使X轴的位置在divparent左上角位置
var deltaY = e.clientY - parentY; //使y轴的位置在divparent左上角位置
var centerX = deltaX - parentPosition.width/2; //使X轴的位置在divparent中间位置
var centerY = deltaY - parentPosition.height/2; //使y轴的位置在divparent中间位置
var degreeY = centerX / 100 * 5; //将移动的位置像素位置距离转换成角度
var degreeX = -centerY / 100 * 5; //将移动的位置像素位置距离转换成角度（由于X轴的角度变换是根据Y轴决定并且Y轴负值是Y轴顺时针旋转所以前边需要添加负号）
divchild.style.transform='rotateX(' + degreeX + 'deg) rotateY(' + degreeY + 'deg)' //将获取的鼠标位置信息添加到CSS中的divchild元素中
});
</script>
</html>
CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。
使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。
transition:transform 1s;过度动画1秒
