css3的父元素设置perspective与子元素设置perspective（）景深怎么叠加的 5
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>W3Cschool教程(w3cschool.cn)</titl...
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title><style>#div1{perspective: 200px; position: relative; height: 200px; width: 200px; margin: 100px; transform: rotateY(0deg); border: 1px solid black;transform-style: preserve-3d;}#div2{ height: 200px; width: 200px; position: absolute; border: 1px solid black; background-color: red;transform: perspective（200px） rotateY(30deg) ; }#div3{ padding:40px; position: absolute; border: 1px solid black; background-color: yellow;}</style></head><body><div id="div1"> <div id="div2">HELLO </div><div id="div3">YELLOW</div> </div></body></html>最上面两个盒子 也就是父元素与子元素都设置了perspective值；如果只设置其中一个，那么，效果都一样 ，但是两个同时设置了，效果就不一样了 ，父元素的舞台与子元素的舞台宽高都一样啊，子元素也没设置translatez，有那个牛逼的发现了这个问题，麻烦给讲解下，非常感谢！
展开
1个回答
展开全部
perspective是设置3d效果的景深，通俗来说就是设置你的眼睛与这个3d元素的距离。而生活经验告诉我们，你从远处和近处分别观察同一个物体（比如正方形）时，其3d效果肯定是不同的。
还有一个属性是perspective-origin，则是用来设置3d效果的视角的，说白了就是你观察3d元素的角度，正常情况下物体是放在你眼睛的正前方，你眼睛只需平视即可，如果把物体向上下左右不同方向移动，在你的头部不能移动的前提下，你的眼睛要想看到物体就需要随着物体的移动而转动，这就是视角。而在不同的视角下，物体的3d效果肯定也会不同（比如物体移动到你眼睛的上方，你能看到物体的底面，而当它移动到你眼睛的下方时，你看不到底面了，只能看到顶面）。
还有一个属性是perspective-origin，则是用来设置3d效果的视角的，说白了就是你观察3d元素的角度，正常情况下物体是放在你眼睛的正前方，你眼睛只需平视即可，如果把物体向上下左右不同方向移动，在你的头部不能移动的前提下，你的眼睛要想看到物体就需要随着物体的移动而转动，这就是视角。而在不同的视角下，物体的3d效果肯定也会不同（比如物体移动到你眼睛的上方，你能看到物体的底面，而当它移动到你眼睛的下方时，你看不到底面了，只能看到顶面）。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
