css3中perspective属性 | 您所在的位置:网站首页 › 1200*800px是什么意思 › css3中perspective属性 |
简介:
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。参数取值:指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值,none:不指定透视,我们一起来了解一下。 perspective这个属性不是很好的观看效果,可以根据它与translateZ来一起观看其效果,因为时z轴移动,它可以给人一种觉得一个div中的图片离里越来越近。 首先具体代码: *{ margin: 0px; padding: 0px; } body { perspective: 800px; } .wrapper{ width: 200px; height: 200px; background-image: url(img/img1.jpg); background-repeat: no-repeat; background-size:cover; margin: 200px auto; transform: translateZ(0px); }注意:这时我们的translateZ(0px)没有移动,body中也设置了 perspective: 800px;,perspective只能设置在元素的父级中。 开始设置的效果: 很普通的一张图片,当我们来调translateZ移动的大小时,可以观看图片的具体变化。当translateZ(500px)时,效果为: 这是我们把translateZ的值调整为负数时,看其效果。 这时为什么perspective为800px,translateZ(0px)时,图片大小没有变化呢,如果调整perspective的大小又是什么效果呢?
得出结果: translateZ 的值越大,图片越大。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |