hooyantsing's Blog

P185_34_perspective透视规则与函数不同应用体验

字数统计: 203阅读时长: 1 min
2020/04/23

P185 34 perspective透视规则与函数不同应用体验

默认情况下,视图是二位视角。应用perspective后可以看到立体效果。

perspective

对元素添加参数,应用于当前元素。

每个应用的元素都是单独视角。

8dbf14aba25c05c75595b3ed06c1277c.png

1
2
3
4
5
6
7
8
9
10
main{
    display: flex;
}
div{
    margin-right: 100px;
    width: 200px;
    height: 200px;
    background: #f1c40f;
    transform: perspective(500px) rotateY(45deg);
}

其中参数为距离元素的视距,值越大看的越远,反之亦然。

例:将参数设小,可见视角已经非常靠近元素。

bbe75cb937791e9406f727da8038d8d0.png

1
transform: perspective(100px) rotateY(45deg);

perspective

对盒子添加属性,应用于里面的子元素。

一个视角,当作一个整体看里面所有发生立体效果的元素。

c37d6978c90a667f2fa3947c96d0ed54.png

1
2
3
4
5
6
7
8
9
10
11
12
main{
    display: flex;
    perspective: 600px;
    border: solid 5px silver;
}
div{
    margin-right: 100px;
    width: 200px;
    height: 200px;
    background: #f1c40f;
    transform: rotateY(45deg);
}
CATALOG