H5C3-2D、3D转换-动画

---

一、2D转换-transform

可以改变元素在网页中的位置，类似定位
属性：transform

属性值	解释说明
translate(x,y)	移动。移动的距离是盒子的自身的高宽度。1、里面的参数可以是百分比。2、不会影响其他元素的位置。3、对行内元素没有效果
rotate(度数)	旋转，单位是deg，当角度为正值时顺时针旋转，为负值时逆时针旋转
transform-origin(x y)	设置旋转或缩放的中心点,之间用空格隔开。可以给x y 设置像素或者方位名词
scale(x,y)	参数不跟单位 就是倍数的意思 ,等比例缩放只写一个值,优点： 不会影响其他的盒子 而且可以设置缩放的中心点 默认中心点缩放的

综合写法：transform:translate() rotate() scale()；
注意：和背景写法的不同点就是：书写的位置不变：当我们同时有位移和其他属性的时候，记得要将位移放到最前面

二、动画-animation

定义：相比于过渡，动画可以实现更多的变化，可以连续自动播放
0%或者from是动画的开始，100%或者to是动画的完成-----动画的序列。
可以改变任意多的样式和任意多的次数,多个动画用逗号隔开 里面的百分比要是整数

书写规范–先定义后使用
1、先定义：
@keyframes 动画名称 {
      0% {
            中规定某项css样式，就能创建有当前样式逐渐成为新样式的动画效果;
        }
    100% {
            中规定某项css样式，就能创建有当前样式逐渐成为新样式的动画效果;
            }
}
2、后使用(谁需要动画就给谁添加)：
标签{
             animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 ;
}

属性	说明
@keyframes	定义动画
animation-name	动画名称
animation-duration	花费的时间。单位是秒和毫秒
animation-timing-function	动画的速度曲线，默认值：ease，匀速：linear，指定时间函数中的间隔数量（步长）：steps()
animation-delay	何时开始默认值是0
animation-iteration-count	动画播放的次数默认是1，无线循环是infinite
animation-direction	是否反方向播放默认值是normal 还有跑马灯：alternate。
animation-fill-mode	播放后停留的位置，默认是backwards回到起始位置。停在结束位置forwards
animation-play-state	是否运行还是停止，默认是running，还有paused，暂停动画。和hover搭配用，鼠标放上去就停止

综合简写 animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 ;
注意：先写持续时间,后写何时开始。动画名称和持续时间是必须写的。简写不包括animation-play-state，一般和hover一起。

三、3D转换-transform

属性	说明
perspective	透视，透视值越小成像就越大,观察的物体就越立体。透视的单位是像素，透视写到被观察物体的父盒子里面
transform:translate3d (x,y,z)	位移，xyz值不可以省略，如果没有就写0 单位px，z轴越大物体就越大，负值就越小，前提是在透视下
transform:rotate3d(x,y,z)	旋转 单位deg
transfrom-style	3d呈现，flat子元素不开启3d立体空间 默认的。preserve-3d；子元素开启立体空间代码是写给父级，但是影响的是子盒子

xyz表示旋转的矢量 transform:ratate3d(x,y,z,度数deg);----沿着自定义轴旋转deg为角度 比如沿着x轴旋转45度：transform:ratate3d(1,0,0,45deg);
1、 transform:rotateX(45deg);------沿着x轴正方向旋转45度 正值方向：左手准则
2、 transform:rotateY(45deg);------沿着y轴正方向旋转45度 正值方向：左手准则
3、 transform:rotateZ(45deg); 跟2d旋转一样，不需要透视

四、私有属性

为了照顾老版本浏览器的兼容性
-moz-： 代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性