这次给大家带来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效果;
106-3D转换模块二. 正方体(有瑕疵,页面文字显示有问题)
107-3D转换模块-正方体- 1
- 2
- 3
- 4
- 5
- 6
正方体(有瑕疵,仅供了解)
三. 正方体(终极方案)
旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;
立体效果攻略:先旋转一定的度数,再沿z轴平移
108-3D转换模块-正方体终极- 1
- 2
- 3
- 4
- 5
- 6
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: