admin管理员组文章数量:1566652
最近做视差滚动的时候差点没被这两个东西逼疯…
正文:
以下是一些我们与要用的的相关知识，想要更详细的解释可上网查询。
-----------------------------------------------------------------------------------------
1
为元素及内容应用透视变换
2
3
transform不可继承。
4
scale辐射放大
其中说到了Z=0的平面，那么我们先介绍下3D坐标轴。
X轴正方向:以屏幕的左上点为原点指向你的右手方向。
Y轴正方向:以屏幕的左上点为原点指向下。
Z轴正方向:垂直屏幕出来只想外面（不严谨理解：指向你的眼睛？）
图：
好了，我们来举一个例子。
我们对父元素容器设置perspective:100px；
对子元素设置transform:translateZ(-50px)；应该为下面图中的情况。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
/* perspective: 100px; */
}
.a{
width: 500px;
height: 500px;
background-color: #7fff00;
perspective: 100px;
}
.b{
width: 200px;
height: 200px;
background-color: cornflowerblue;
transform: translateZ(-50px) /* scale(1.5); */
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
我们先来看下计算的结果:
再来看下实际效果：
嗯，确实对的上。
额外差一个小内容：电脑显示设置里的缩放和布局影响到我们浏览器里内容的宽高。。
要注意设为100%
好了，继续。
我们发现原图为这样:
为什么添加了perspective和transform:translateZ()后，蓝颜色小块发生了位移？
答案我最开始贴出的第二张图片中:
观察点位于要投影的对象的右下，所以投影也会偏右下。
那如果我是给body设置perspective呢？
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
perspective: 100px;
}
.a{
width: 500px;
height: 500px;
background-color: #7fff00;
/* perspective: 100px; */
}
.b{
width: 200px;
height: 200px;
background-color: cornflowerblue;
transform: translateZ(-50px) /* scale(1.5); */
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
效果:
body未设置高度和宽度，高度为子元素最高高度，宽度为100%视口。
所以蓝色小块与上面的情况处于同一高度但是更偏右（body’的100%视口比选择器.a的500px大）
熟能生巧！再来一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
/* perspective: 100px; */
}
.a{
width: 500px;
height: 500px;
background-color: #7fff00;
perspective: 100px;
}
.b{
width: 100%;
height: 200px;
background-color: cornflowerblue;
transform: translateZ(-50px) scale(1.5);
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
效果:
因为width设置了100%所以居中无偏移，但是观察点位于要投影的对象的下方所以投影向下移一点。
好,现在附上简单的视差滚动效果。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
overflow-y: auto;
height: 600px;
background: rgba(0, 0, 0, .3);
perspective: 100px;
}
.b{
height: 800px;
/* display: flex;
align-items: center;
justify-content: center; */
}
.c{
transform: translateZ(-100px) scale(2);
height: 100px;
background-color: aqua;
}
.d{
transform: translateZ(-100px) scale(2);
height: 100px;
background-color: red;
}
.e{
overflow: hidden;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="e">
<div class="c"></div>
<div class="d"></div>
</div>
<div class="e">
<div class="c"></div>
<div class="d"></div>
</div>
</div>
</div>
</body>
</html>
该效果是由
1.文档与内容不同的滚动速度
2.设定一个父容器超出其高度就隐藏（代码中为选择器为.e的div）
3.由于.c和.d跟不上.e所以逐渐被隐藏
4.b和.a构成滚动容器
然后我们把作为内容的div换成图片就行啦
例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
background: rgba(0, 0, 0, .3);
perspective: 100px;
}
.b{
height: 100vh;
overflow-y: auto;
/* display: flex;
align-items: center;
justify-content: center; */
}
.c{
height: 50vh;
overflow: hidden;
}
.e{
transform: translateZ(-50px) scale(1.5);
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">
<img src="../images/1.jpg" alt="" class="e">
</div>
<div class="c">
<img src="../images/2.jpg" alt="" class="e">
</div>
<div class="c">
<img src="../images/3.jpg" alt="" class="e">
</div>
<div class="c">
<img src="../images/4.jpg" alt="" class="e">
</div>
<div class="c">
<img src="../images/5.jpg" alt="" class="e">
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container{
perspective: 100px;/* ---------------------------1 */
overflow-y: scroll;/* ---------------------------2 */
height: 100vh;
}
.box{
overflow: hidden;/* -----------------------------3 */
height: 100vh;
}
.img {
width: 100wh;
height: 100vh;
transform: translateZ(-100px) scale(2)/* --------4 */
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="img"><img src="../images/1.jpg" alt="" /></div>
</div>
<div class="box">
<div class="img"><img src="../images/2.jpg" alt="" /></div>
</div>
<div class="box">
<div class="img"><img src="../images/3.jpg" alt="" /></div>
</div>
<div class="box">
<div class="img"><img src="../images/4.jpg" alt="" /></div>
</div>
<div class="box">
<div class="img"><img src="../images/5.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
补充:
1
2
要给观察视口添加滚轴，自带的滚轴是html的
本文标签： 原理perspectivetranslateZ
版权声明：本文标题：perspective和-translateZ()的投影原理 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1725894325a1047444.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论