css3中3D变换的景深和灭点

来源：互联网发布：方维一元云购夺宝源码编辑：程序博客网时间：2024/04/28 10:55

景深

概念

简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）；

设置景深：

//在父元素上设置perspective: 200px;//或者transform:perspective(300px);

应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）；
CSS3 3D transform的透视点是在浏览器的前方，或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！
- 比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

景深示例

示例一

当两个父级元素设置不同的景深距离，那么将两个父元素的子元素设置相同的translateZ，则两个子盒子呈现的3D平移效果导致子盒子大小不同；

//css样式设置<style>    *{        padding: 0;        margin: 0;    }    #box1{        float: left;        width: 300px;        height: 300px;        background-color: red;        perspective:3000px;        position: relative;    }    #box2{        float: left;        width: 300px;        height: 300px;        background-color: gray;        perspective:6000px;        position: relative;    }    #innerbox1{        position: absolute;        width: 150px;        height: 150px;        left: 50%;        top: 50%;        margin-left: -75px;        margin-top: -75px;        background-color:green;        transform: translateZ(1200px);    }    #innerbox2{        position: absolute;        width: 150px;        height: 150px;        left: 50%;        top: 50%;        margin-left: -75px;        margin-top: -75px;        background-color:blue;        transform: translateZ(1200px);    }</style>//HTML结构设置<body>    <div id="box1">        <div id="innerbox1">inner1</div>    </div>    <div id="box2">        <div id="innerbox2">inner2</div>    </div></body>

示例二

设置父元素perspective为200px，则其子元素的变化；
设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；
设置的translateZ值越大，该元素也会越来越大；
所以，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

//css样式设置<style>    *{padding: 0;margin: 0;}    #box1{        float: left;        width: 300px;        height: 300px;        background-color: red;        perspective:200px;        position: relative;    }    #innerbox1{        position: absolute;        width: 150px;        height: 150px;        left: 50%;        top: 50%;        margin-left: -75px;        margin-top: -75px;        background-color:green;        //设置相同的perspective:200px;然后将子元素设置不同的translateZ。越大的translateZ，显示越大。        transform: translateZ(80px);        //transform: translateZ(10px);    }</style>//HTML设置<body>    <div id="box1">        <div id="innerbox1">inner1</div>    </div></body>

景深和灭点关系

灭点指的是立体图形各条边的延伸线所产生的相交点，透视点的消失点；
景深越大，灭点越远，元素的变形越小；

景深越小，灭点越近，元素的变形越大；

//css样式的设置<style>    *{margin:0;padding:0;}    /*    景深越大,灭点越远,元素的变形越小    景深越小,灭点越近,元素的变形越大    */    //设置一个盒子的样式    #wrap{float: left;width: 100px;height: 100px;padding: 100px;border: 1px solid;perspective: 200px;}    #inner{transform: rotateX(120deg);}    #inner{width: 100px;height: 100px;background-color: deeppink;transition: 2s;}    //设置另外一个盒子的样式    #wrap1{float: left;width: 100px;height: 100px;padding: 100px;border: 1px solid;perspective: 600px;}    #other{width: 100px;height: 100px;background-color: hotpink;transition: 2s;}    #other{transform: rotateX(120deg);}</style>//HTML结构如下<body>    <div id="wrap">        <div id="inner">inner</div>    </div>    <div id="wrap1">        <div id="other">other</div>    </div></body>

结果如下图：
这里写图片描述

阅读全文

0 0