css3 2d 3d动画效果

2D**1.过渡（谁过渡给谁写）**慢慢变化的一种形态 应该作用在自身上
transition ： 属性（斜体样式width之类，如果属性过多可以用all来代替） 花费时间(s） 运动曲线（先快后慢之类） 几秒之后开始变换。

2.变形—移动（代码写在鼠标移动里）
transform:translate(x,y) 拓展：在居中定位中为了防止更换图片带来的影响，用transform：translate（-50%，-50%）可以用于自适应居中。

3.缩放（搭配overflow隐藏放大后的内容，代码放在鼠标移动里）
transform:scale() x水平缩放 y垂直缩放 只写一个整体缩放 默认值为1（倍数1） 小于1缩小大于1放大 建议给他的父元素设置overflow：hidden

4.旋转（花里胡哨的做好头晕准备，代码放在鼠标伪类里）
transform:rotate（90deg）deg度数

5.定点：（代码放在要旋转的图片里）
transform-orign：位置 位置

6.倾斜（代码写在鼠标移动）
transform：skew（deg deg）x为正值左边倾斜 负值右边倾斜
y正值下 负值上
以块中心为基点

7.transform：translate3D（x,y,z)z需要与透视相搭配 ，他和缩放之间的区别本身大小没有变化只是视觉带来的变化，z越大看到的越大

8.翻转图片
backface-visivility:hidden;（不是正面面对屏幕就隐藏）类似硬币正反面

9.合并写
元素{transition：all 时间}
元素：hover{transform：translate（）rotate（）要先移动再旋转

总结：

1. 在图片上设置 过渡 定位
2. 在鼠标移动上设置旋转的角度（横着为x轴，竖着为y轴） 倾斜 移动
3. 在父元素设置透视（perspective）
   4.最好的优势在变换过程中不会像设置margin那样影响周边的盒子

动画（animation）
相比较过渡，他多出了更多变化，控制，重复自动循环
方法：
1.先定义动画名字
2.再调用（名字。时间）

要点学会step应用

3D：相对于2d多了z轴px
移动 transform：translate3d（x,y,z）
透视perspective
度数transform：rotate3d（x,y,z,deg）
3d效果呈现transform-style：preserve-3d

1. 1.让子元素开启立体空间
2. 2.代码要写给父元素
3. 3.很重要
4. 3d导航栏 一个面往下移自身一半一个往前移动一半

翻转两面盒子：让不是面向我们的设置为back-visibility：hidden；
动画无缝轮播;:利用整个ul移动，并且复制自己一份ul，给ul设置父元素200%的宽度，利用动画form，to进行循环播放就可以了，父盒子进行overflow：hidden，同时要设置鼠标经过ul动画暂停。