perspective和perspective-3d的区别详解
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);
}
让我们来看看这段代码的效果
在该属性是很好的展示了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);
}
我们用第一张图和第二张图来进行对比发现,第一张图呈现了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);
}
从这张图我们就可以看到效果,子元素旋转了45度,而且他的上半部分还在父盒子的下面,这就是这两个最本质的区别,一个是假3D一个是真3D,一个只是实现视觉效果,一个是让元素存在3D空间中,让元素有了立体感。
栏 目:CSS
本文标题:perspective和perspective-3d的区别详解
本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=253
您可能感兴趣的文章
- 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的用法。