作者:你的美我chase | 来源:互联网 | 2020-07-29 23:38
这次给大家带来HTML与CSS中的3D转换模块,使用HTML与CSS中的3D转换模块注意事项有哪些,下面就是实战案例,一起来看一下。
文中的img标签![](images/jacky/xin.png) 全部变成了macdown格式
一. 什么是2D和3D
1.什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
3.transform-style的取值:
flat:默认取值,二维的;
preserve-3d:3D效果;
二. 正方体(有瑕疵,页面文字显示有问题)
三. 正方体(终极方案)
旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;
立体效果攻略:先旋转一定的度数,再沿z轴平移
HTML与CSS中2D转换模块
以上就是HTML与CSS中的3D转换模块的详细内容,更多请关注 第一PHP社区 其它相关文章!