3D 变换:perspective

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

为元素应用 3D 的变换,需要使用 perspective 去添加一个透视 .. 也就是离我们越远的地方,看起来会越小 .. perspective 的值越小,给我们的透视感就越强 ..

我们可以给这个页面上显示的图片应用一个 perspective ... 可以用它作为 transform 的一个方法 . 添加一个 transform 属性 .. 用一下 perspective 方法 .. 把一个值交给它 .. 比如 300px ..

然后我们可以再用一个旋转的变换方法 .. 可以在元素的 Y 轴旋转 .. 用的是 rotateY .. 再给它一个角度 .. 45deg ..

这个图像会围绕着它的 Y 轴 .. 它相当于是这条垂直的参考线 .. 旋转 45 度 ... 并且会有一个透视的效果 .. 离我们远的地方会小一些 ...

修改一下 perspective 的值,让它小一些 .. 这个值越小,给我们的透视感会越强 ...

它的值越大 ... 这个透视感会越弱一些 ...

3D 变换:perspective《 CSS:变换 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点