2D转换&3D转换&动画

2D转换transform：

所有属性值：

transform : none   ；默认值

transform : translate() ; 移动 平移  默认X轴移动，单位是px，也可%，是自己的%

transform : rotate(30deg) ； 旋转  单位deg，默认Z轴(中心)旋转

transform : scale(2) ；X和Y同时缩放 ，不加单位， 默认值是1，大于1是放大，小于1是缩小

transform : skew(30deg) ; 倾斜 单位deg，默认X轴

 

 

3D转换：

Z轴没有倾斜的写法；

让平面转换成3D必须添加：transform-style：preserve-3d；

perspective  景深（如何查看透视图）值越大幅度越小；

transform：rotate3d（X,Y,Z,转的角度）

【eg      tranform：rotate3d（0,1,0,30deg）0代表不旋转，1代表旋转】

与2d的区别：

2d有的属性，3d都有；

3d比2d多一个Z轴，需声明为3d，和景深；

动画：

keyframes 关键帧，animation动画；

1. animation-name：mymove；是用来定义一个动画的名称；                                         mymove是有keyframes创建的动画名，mymove要和keyframes中的mymove一致
2. animation-duration   运动时间s；
3. animation-delay   延迟时间s；
4. animation-timing-function  播放方式，linear、ease；
5. animation-iteration-count  循环次数 可取值<number>为数字，默认值为1；infinite无限循环
6. animation-direction  是否轮流反向播放动画   alternate-reverse往返播放动画；

简写：animation：name  duration delay(可无)   播放方式   是否循环  是否往返；

对动画的编辑：

@keyframes  名称{

0%开始{background:red;width:300px;}

100%结束{ background:blue;width:600px;}

}

【若有兼容的问题，则在@和keyframes之间加前缀】

 

面试常问：