11-HTML5CSS3②（2D转换）

1. 2D转换

2D 转换：2D 转换是改变标签在二维平面上的位置和形状

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

1.1 2D转换之移动translate

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

• translate 最大的优点就是不影响其他元素的位置
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果

1.2 2D转换之旋转rotate

/* 单位是：deg */
transform: rotate(度数) 

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点

1.3 2D转换中心点transform-origin

transform-origin: x y;

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
• 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

1.4 2D转换之缩放scale

transform: scale(x, y)

• 注意，x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

1.5 2D转换综合写法以及顺序问题

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()
• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

2.动画animation

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
动画的基本使用： 先定义动画，再调用定义好的动画

• 定义动画：

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

• 使用动画：

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

2.1 动画序列

• 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
• 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
• 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

2.2 动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	动画名称（必须）
animation-duration	动画周期时长
animation-timing-function	动画的速度曲线，默认为ease
animation-delay	动画开始时间，默认为0
animation-iteratio-count	动画播放次数，默认为1，无限循环为infinite
animation-direction	下一周期是否逆向播放，默认normal，alternate逆播放
animation-play-state	动画的状态，播放或暂停，默认为running，暂停为paused
animation-fill-mode	动画结束时的停留状态，保持forward，回到起始为backward（默认）

2.3 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

2.3 关于animation-timing-function速度曲线

值	描述
ease	逐渐慢下来，规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear	匀速，规定从开始到结束具有相同速度的过渡效果
ease-in	加速，规定缓慢开始的过渡效果
ease-out	减速，规定缓慢结束的过渡效果
ease-in-out	先加速后减速，规定开始和结束较慢的过渡效果
steps()	指定了时间函数中的间隔数量（步长）