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的用法。


阅读排行
推荐教程
- 10-06transform-origin详解
- 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的用法。