2D、3D转换及动画知识梳理

一、2D转换

1、定义

转换可以简单理解为变形

2、移动 translate

①、格式：transform：trabslate（x,y）；

②、优点：不会影响其他元素的位置，类似于定位

③、x，y参数可以用%，50%就是移动盒子自身宽或高的一半

④、对于行内元素是无效的

3、旋转：rotate

1、格式：transform：rotate（度数）度数单位为deg

2、旋转中心点 transform-origin：x y；（xy中间是用空格隔开的）

①、默认旋转的中心点是元素的中心点（50%，50%）

②、也可以给x y设置像素或者方位名词（top right bottom left center）

4、缩放：scale

1、格式：transform：scale（x，y） 不能跟单位

注：括号里面只有一个数时，是等比例缩放

2、优势：不会影响其他盒子，而且可以设置缩放中心点

5、2D转换综合写法

1、格式：transform：translate（）空格 rotate（） 空格 scale（）

注：同时有位移和其他属性时，应先位移，因为先旋转会改变坐标轴方向

二、动画

1、定义动画 

@keyframes（类似定义类选择器） 动画名称 { 
     0% { transform：translatex（）}
    100%{transofrm：translatex（）}（0%-100% 这一过程叫做动画序列）
}

2、使用（调用）动画

用法：

在要使用的选择器里{ 
animation-name：动画名称(调用动画)
animation-duration：持续时间（持续时间）
}

注：①、可以做多个状态的动画  keyframe（关键帧）
       ②、里面的百分比是要整数
       ③、里面的百分比就是 总的时间（持续时间）的划分

3、动画中常见的属性

①、anomation-timing-function：ease 运动曲线

linear 匀速           ease 默认 低速开始-加快-结束前减速      ease-in 低速开始     ease-out 低速结束

ease-in-out 低速开始和结束      steps（）间隔步长（常用来做类似火柴人的动画）

②、animation-delay：时间  何时开始

③、animation-iteration-count：infinite  重复的次数 

解释：interation 重复的      conut 次数     infinite 无限

④、animation-direction：alternate； 是否反向播放

默认为 normal 是      如果想要反向，就写 alternate

⑤、animationn-fill-mode：backwards； 动画结束后的状态

默认是 backwards 回到起始状态         forwards 是留在结束状态

⑥、animation-play-state：paused 动画运动状态

默认running     paused停止             一般配合伪类选择器 如：hover 使用 

4、动画简写

①、animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态（中间都是以空格隔开）

注：前面两个属性不能省

②、一个元素可以添加多个动画，但是要以逗号分隔

三、3D转换

1、特点：近大远小 ，物体后面遮挡不可见

backface-visibility：hidden 隐藏旋转元素的背面
定义：当元素不面向屏幕时是否可见

2、3D移动

①、translateZ 后面的单位一般跟px

②、简写：transform：translate3d（x，y，z）x，y，z不能省略，没有就写0

3、透视 perspective 

①、视距：人的眼睛到屏幕的距离

②、视距越大，在电脑平面成像越大，越远成像越小

③、透视的单位是像素

④、透视写在被观察元素的父盒子上面

4、3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿x,y,z轴或自定义轴旋转

5、3D呈现

①、transfrom-style（控制子元素是否开启3d空间）

②、transform-style:flat 默认的，不开启    transform-style：preserve-3d  开启

③、代码写给父级，但是影响的是子盒子

四、浏览器私有前缀（为了照顾老版本）

1、-moz-：代表fierfox（火狐）浏览器私有属性

2、-ms-：代表ie浏览器私有属性

3、-webkit-：代表safari、chriome（苹果）私有属性

4、-o-：代表Opera（欧鹏）私有属性