CSS3（一）2D+动画+3D

一、2D转换

转换（transform）

• 移动：translate
• 旋转：rotate
• 缩放：scale

1.1二维坐标系

1.2.2D转换之移动translate

1.语法：

1.3.2D转换之旋转rotate

1.语法
transform:rotate(度数);

谁旋转给谁添加 transition: all 5s;

1.4 2D旋转中心点transform-origin

2.重点：

• 注意后面的参数x和y用空格隔开
• x y 默认转换的中心点是元素的中心点(50% 50%)
• 还可以给x y设置像素或者 方位名词

1.5 2D转换之缩放scale

放大和缩小
1.语法：

**2.**注意

• 注意其中的x和y用逗号隔开
• scale(1,1)宽高均放大1倍，相当于没放大
• scale(2）只写一个参数宽高均放大2倍

1.62D转换综合写法

二、CSS3动画

animation动画

动画比过度更强大

2.1动画基本使用

1.先定义动画
2.再使用动画

动画序列

• 0%是动画的开始，100%是动画的完成。
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
  2.元素使用动画
  
  

2.2动画常见属性

animation-iteration-count:infinite;

三、CSS3 3D转换

3.1 3D移动translate3d

3.2透视perspective

产生3D的立体效果
单位是像素

2.4 3D旋转rotate3d

2.5 3D呈现transfrom-style