perspective用在父元素和子元素上的区别
我们平时给元素设置视距，增加其3D效果。但是给父元素设置perspective属性和给自身直接设置transform：perspective属性有时候效果一样，有时候效果差别却很大。下面我根据自己的经验来浅谈一下自己的认识。
如果页面中只有一个元素的时候，给父元素加perspective：800px；（此处设置的值为800px）的效果和给自身加transform：perspective（800px）；的效果是一样的。
代码和效果图如下：
<style>
body {
/*perspective: 800px;*/
}
div {width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: perspective(800px) rotateY(50deg);
/*transform: rotateY(50deg);*/
}
</style>
<body>
<div></div>
</body>
但是，如果页面中有多个元素的时候，差异性就体现出来了。
在给父元素加perspective：800px；属性的时候，会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。
代码和示意图如下：
<style>
body {perspective: 800px;
}
div {width: 200px;height: 200px;
background-color: red;
float: left;
margin: 50px 20px 0 0;
transform: rotateY(-40deg);
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
给父元素添加属性transform：perspective（800px）
在分别给子元素加transform：perspective（800px）；属性的时候，会以元素自身的某个点作为视点，所以呈现出的效果还是一样的。
代码和示意图如下：
<style>
body {
/*perspective: 800px;*/
}
div {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin: 50px 20px 0 0;
transform: perspective(800px) rotateY(-40deg)；
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
上一篇：perspective和perspective-3d的区别详解
栏 目：CSS
本文地址：http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=254
您可能感兴趣的文章
- 05-13精灵图
- 05-13flex布局
- 05-05css盒子模型详解
- 05-05flex布局中，align-content和align-items居中的区别
- 10-13flex中的align-content和align-items的区别
- 10-13animation steps属性的解释说明
- 10-06perspective用在父元素和子元素上的区别
- 10-06perspective和perspective-3d的区别详解
- 10-06transform-origin详解
- 10-05css中，vmin和vmax的用法。
阅读排行
推荐教程
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 10-13flex中的align-content和align-items的区别
- 05-05css盒子模型详解
- 08-13网页常用配色方案
- 10-06perspective用在父元素和子元素上的区别
- 09-15css中的inherit用法详解
- 09-11animation地图案例
- 10-05css中，vmin和vmax的用法。
- 09-10transform案例之旋转门