html与css转换,HTML与CSS中的3D转换模块

这次给大家带来HTML与CSS中的3D转换模块，使用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转换模块

二. 正方体(有瑕疵,页面文字显示有问题)

107-3D转换模块-正方体

• 1
• 2
• 3
• 4
• 5
• 6

正方体(有瑕疵,仅供了解)

三. 正方体(终极方案)

旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;

立体效果攻略:先旋转一定的度数,再沿z轴平移

108-3D转换模块-正方体终极

• 1
• 2
• 3
• 4
• 5
• 6

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：