通过正方体案例来了解HTML5+CSS3+Bootstrap的3D转换、旋转等功能
目 录
一、前言
二、知识点讲解
三、实现的代码及功能
1.创建盒子模型以及定义3D变量的初始值
2.定义box的旋转角度（这个是为刚好的体现正方体每个角度的文字）
3.定义正方体每个面的样式
4.实现正方体各个面的位置及3D功能的效果
5.将正方体的各个面全部实现
四、案例完整代码
五、案例运行的截图及视频
一、前言
1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的变形中的3D转换、旋转等功能的代码，这也是很多教材的一个典型案例，具体功能是实现一个盒子模型的正方体能够以3D的方式进行旋转，同时每个面上会显示对应的方向数字；
2.本文将讲解涉及到3D转换、旋转等功能的知识点，其它方面会大致讲一下；
3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；
4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；
5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教；
二、知识点讲解
| 函数名 | 功能描述 | 功能说明 |
|---|---|---|
| translate3d(x,y,z) | 声明3D转化 | 元素需要移动的数值 |
| translateX/Y/Z(x)/(y)/(z) | 单独用于x/y/z轴的值 | 元素需要移动的数值,这里的x.y.z是单独一段使用的 |
| scale3d(x,y,z) | 声明3D缩放 | 表示缩放的比例，取值范围是正数、负数和小数 |
| scaleX/Y/Z(x)/(y)/(z) | 沿着x/y/z轴缩放 | 表示缩放的比例，取值范围是正数、负数和小数,这里的x.y.z是单独一段使用的 |
| rotate3d(x,y,z,angel) | 定义3D旋转 | x,y,z判断旋转的轴，旋转轴的值设置为1，否则为0，angel表示元素旋转角度 |
| rotateX/Y/Z(x)/(y)/(z) | 沿着x/y/z轴3D旋转 | angel表示元素旋转角度，这里的x.y.z是单独一段使用的 |
三、实现的代码及功能
1.创建盒子模型以及定义3D变量的初始值
下面定义了正方体每一个面的样式及名字，这里需要使用
，同时把这个
声明名称为box
前
后
左
右
上
下
下面需要在head头文件将声明的box定义3D变量的初始值，之前需要声明style；
前后左右上下