补充前置知识：CSS transform 3D位移与旋转
rotateX(180deg) 上下旋转
rotateY(180deg) 左右旋转
rotateZ(180deg) 自己旋转
rotate3d(1,1,0,180deg) 自定义旋转
translateZ(30px) Z轴移动（前后）
完整的3D正方体
针对 CSS的Flex布局(弹性盒子) 内容的补充
继续阅读border 边框的边缘之间，效果是切割彼此一半
当不没有内容的宽高的时候，效果如下
将其他边框设置为透明色，得到一个三角形
new 是实例化 类 的操作。针对定义与使用，有以下操作
继续阅读该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式
vertical-align 样式演示
|
|
无名喵站
|
视口就是浏览器显示页面内容的屏幕区域
<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">标准的 viewport 设置
传统的 JS 只有 对象 的概念，没有class类的概念，因为 JS 是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象
但 ES6 引入了 class 类这个概念，通过 class 关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言
class Person{ // 定义一个名为Person的类
// 构造函数，用来接受参数
constructor(x,y){
this.x = x; // this代表的是实例对象
this.y = y;
}
todoSome(){ // 这是个类的方法，不需要加function，有多个方法也不用逗号隔开
alert(this.x + “的年龄是” +this.y+”岁”);
}
}
在2D平面产生近大远小视觉立体，但是只是效果二维的
透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小
perspective 可设置透视 （译为视距）
// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近
perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。
因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d
步骤1 @keyframes 定义动画样式 和 名称
// 顺序可用from {} to {} 或 百分比 0%{} 100%{}
@keyframes move {
/* 初始位置 */
0% {
transform: translateX(0px);
}
/* 基于初始位置向右移动500px */
100% {
transform: translateX(500px);
}
}
步骤2 animation-name 引入动画样式
/* 引入该动画:动画名称 */ animation-name: move;
步骤3 animation-duration 设置动画播放时间
/* 持续时间 5s */ animation-duration: 5s;继续阅读
定义2D转换中的移动，沿着 X 和 Y 轴移动元素；transform 的位移不会影响其他元素的位置
// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽；
// transform 对行内标签没有效果
该CSS样式常搭配 :hover 与 transition 一起使用
transform: none|transform-functions; //不进行转换 或 设置转换的方式函数
继续阅读