欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

perspective用在父元素和子元素上的区别

时间:2022-10-06 18:04:21|栏目:CSS|点击:

我们平时给元素设置视距,增加其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用在父元素和子元素上的区别(图1)


 但是,如果页面中有多个元素的时候,差异性就体现出来了。


  在给父元素加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>

perspective用在父元素和子元素上的区别(图2)

给父元素添加属性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用在父元素和子元素上的区别(图3)


上一篇:perspective和perspective-3d的区别详解

栏    目:CSS

下一篇:animation steps属性的解释说明

本文标题:perspective用在父元素和子元素上的区别

本文地址:http://www.wangzhanteacher.com/index.php?m=home&c=View&a=index&aid=254

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有 Powered by EyouCms冀ICP备17010187号