文章图片
文章图片
上节课我们已经学习了关于HTML 2d相关的知识了 ， 这节课我们就进入3d的学习 。
1.HTML 3d转换HTML 3d转换包括3d移动、3d旋转、3d呈现等内容 ， 与2d转换有相通的地方 ， 大家也可以结合2d转换一起记忆学习 。
2.HTML 3d转换之3d移动与2d移动只能在x、y轴进行移动不同的是 ， 3d移动还可以在z轴进行移动 ， 主要有以下几种书写格式：
1）x、y、z轴分别移动的书写方法：
x轴移动方法：transform: translateX(x轴方法移动的位置);其中向右移动为正 。
y轴移动方法：transform: translateY(Y轴方法移动的位置);其中向下移动为正 。
z轴移动方法：transform: translateY(z轴方法移动的位置);其中向前移动为正 。
2）x、y、z轴同时移动的书写方法：
格式：transform: translate3d(x轴方法移动的位置y轴方法移动的位置z轴方法移动的位置);
3.HTML 3d转换之3d透视为了更加突出3d效果 ， 我们就需要将上3d透视 ， 主要应用规则如下：
1）3d透视需要加在实现3d效果的父元素上：
2）主要格式：perspective: 像素值;像素越大 ， 图像越小 。
如下图 ， 我们将div盒子加上了3d效果 ， 那么3d透视需要加在div的父元素即body上 。
【教会|HTML3D转换怎么使用？一分钟教会你！】
相关经验推荐
- NFC|节能环保品质好 三款优质高转换效率电源推荐
- 脑机接口|盖奇等人设计了一种更系统的脑机接口，将大鼠的神经元转换为频率不同的声音
- 三星|传统的脑机接口在将神经信号转换为控制命令之前，需要先训练解码器
- 软件|（第二节）抖音书单号最新教程，亲手教会你当下书单玩法【纯干货】
- Win10|无需U盘！转换“32位”为“64位”Win 10版本，还可保留用户数据
- 供应链管理|节能环保又省钱！3款优质高转换效率电源推荐
- |使用LM2588-ADJ的5V至双12V升压DC-DC转换器
- 微软|USB至+/-5V电压DC-DC开关转换器Max735
- 教会|一分钟教会你uwsgi怎么配置
- 控制器|50V至5V@7A同步降压（降压）转换器LM5116