css如何转为html5,HTML与CSS中的3D转换模块

文中的img标签全部变成了macdown格式

一.什么是2D和3D

1.什么是2D和3D

2D就是一个平面,只有宽度和高度,没有厚度

3D就是一个立体,有宽度和高度,还有厚度

默认情况下所有的元素都是呈2D展现的

2.如何让某个元素呈3D展现

和透视一样,想看到某个元素的3d效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d即可

3.transform-style的取值:

flat:默认取值,二维的;

preserve-3d:3D效果;

106-3D转换模块

*{margin:0;padding:0;}

.father{width:200px;height:200px;

background-color:red;border:1pxsolid#000;margin:100pxauto;

perspective:500px;transform-style:preserve-3d;

transform:rotateY(0deg);

}.son{width:100px;height:100px;background-color:blue;border:1pxsolid#000;margin:0auto;margin-top:50px;transform:rotateY(45deg);}