html 3d转换工具,如何实现HTML与CSS中的3D转换模块

如何实现HTML与CSS中的3D转换模块

发布时间：2020-07-15 11:05:53

来源：亿速云

阅读：58

作者：Leah

本篇文章给大家分享的是有关如何实现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

以上就是如何实现HTML与CSS中的3D转换模块，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。