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

CSS

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

perspective和perspective-3d的区别详解

时间:2022-10-06 14:26:16|栏目:CSS|点击:

1 perspective

该属性是可以给图像呈现立体感,但是,那仅仅只是一种3D的视觉感受,并没有真正的在3D环境中

我们可以通过下面这段代码来看效果。

HTML代码

    <div class="bc">

        <div class="dh">


        </div>

    </div>

CSS代码

        .bc {

            width: 800px;

            height: 800px;

            margin: 100px auto;

            background-color: rgba(0, 0, 0, 0.5);

            perspective: 500px;

        }

        

        .dh {

            width: 500px;

            height: 500px;

            background-color: royalblue;

            transform: rotateX(45deg);

        }

让我们来看看这段代码的效果

perspective和perspective-3d的区别详解(图1)

在该属性是很好的展示了3D效果,但是并没有让元素存在于3D空间,元素所处在的空间仍然是2D空间,只不过是展现了3D的效果。我们拿transform-style:preserve-3d属性来对比就知道了



2 transform-style:preserve-3d


这个属性是让元素处在了3D空间。我们通过下面的代码来看看效果


HTML代码

    <div class="bc">

        <div class="dh">


        </div>

    </div>

CSS代码

        .bc {

            width: 800px;

            height: 800px;

            margin: 100px auto;

            background-color: rgba(0, 0, 0, 0.5);

            transform-style: preserve-3d;

        }

        

        .dh {

            width: 500px;

            height: 500px;

            background-color: royalblue;

            transform: rotateX(45deg);

        }

perspective和perspective-3d的区别详解(图2)

我们用第一张图和第二张图来进行对比发现,第一张图呈现了3D效果,但是第二张图只是变窄了而且上面平白无故的出现了一块深蓝色,但是我的代码中并没有加这一种颜色,这一种颜色是怎么来的呢?


其实这就是transform-style:preserve-3d的作用,他让元素处在了一个3D空间,上面的深蓝色其实是父元素的背景色和子元素的背景色叠加而成,因为设置子元素沿X轴旋转45度,子盒子的上半部分旋转到了父盒子的后面,不信我们可以将父盒子沿Y轴转45度就知道了。


代码如下:


HTML代码

    <div class="bc">

        <div class="dh">


        </div>

    </div>

CSS代码

        .bc {

            width: 800px;

            height: 800px;

            margin: 100px auto;

            background-color: rgba(0, 0, 0, 0.5);

            transform-style: preserve-3d;

            transform: rotateY(45deg);

        }

        

        .dh {

            width: 500px;

            height: 500px;

            background-color: royalblue;

            transform: rotateX(45deg);

        }

perspective和perspective-3d的区别详解(图3)

从这张图我们就可以看到效果,子元素旋转了45度,而且他的上半部分还在父盒子的下面,这就是这两个最本质的区别,一个是假3D一个是真3D,一个只是实现视觉效果,一个是让元素存在3D空间中,让元素有了立体感。


上一篇:transform-origin详解

栏    目:CSS

下一篇:perspective用在父元素和子元素上的区别

本文标题:perspective和perspective-3d的区别详解

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

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

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

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

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

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