admin管理员组文章数量:1530517
简介:
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。参数取值:指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值,none:不指定透视,我们一起来了解一下。
perspective:800px 就是人离屏幕800px 的地方观看这个div元素。
perspective这个属性不是很好的观看效果,可以根据它与translateZ来一起观看其效果,因为时z轴移动,它可以给人一种觉得一个div中的图片离里越来越近。
首先具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
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);
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
注意:这时我们的translateZ(0px)没有移动,body中也设置了 perspective: 800px;,perspective只能设置在元素的父级中。
开始设置的效果:
很普通的一张图片,当我们来调translateZ移动的大小时,可以观看图片的具体变化。当translateZ(500px)时,效果为:
当translateZ的大小临近与800px时,效果为:
这时图片离我们越来越近了,当它大于800px时,这个图片就消失了。
这是我们把translateZ的值调整为负数时,看其效果。
反之当translateZ为负值时,我们可以看到图片变小了,也就是图片离人越来越远了。
这时为什么perspective为800px,translateZ(0px)时,图片大小没有变化呢,如果调整perspective的大小又是什么效果呢?
这时图片并没有什么变化。
得出结果:
translateZ 的值越大,图片越大。
translateZ 的值越小,图片越小。
translateZ(0px)的时候,perspective值变大,图片没有变化。是因为图片没有移出div屏幕外面,所以图片没有什么变化。
本文标签: 属性perspective
版权声明:本文标题:css3中perspective属性 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725894619a1047480.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论