【CSS3】CSS3新特性——2D转换

▊ 什么是转换（transform）？

转换可以理解为变形，可以实现元素的移动（translate）、旋转（rotate）、缩放（scale）等效果
 

▍ 移动（translate）

transform: translate(x,y);		/*总写*/
transform: translateX(n);
transform: translateY(n);		/*分开写也行*/

1. 作用：改变元素在页面中的位置，类似定位
2. translate最大的优点：不会影响其他元素的位置
3. 百分比写法是自身元素的百分比：translate:(50%, 50%);
4. 对行内标签无效

 
▍旋转（rotate）

transform: rotate(度数);

1. 度数的单位是deg(度)
2. 正值表示顺时针，负值表示逆时针
3. 默认旋转中心是元素的中心点

 
▍缩放（scale）

transform: scale(x, y);

1. x和y用逗号隔开而不是空格
2. transform: scale(0.5);等价于transform: scale(0.5, 0.5);
3. scale缩放的最大优势：不影响其他元素；可以设置中心点
    

▍变换中心（transform-origin）

tansform-origin: x y;		/* 2D转换中心点 */

1. x和y参数之间用空格隔开
2. 默认中心点当然是(50% 50%)
3. x和y也可以是方位名词：top bottom left right center
    

▍综合性写法（连写）

transform: translate() rolate() scale()...

1. 空格隔开
2. 其顺序会影响转换的效果。比如先旋转会改变坐标轴方向
3. 当同时有位移（translate）和其他属性的时候，记得将位移放在最前面
    

 

 

▊ 什么是动画（animation）？

可通过多个节点来精确控制一个或一组动画，相较于过渡，变化效果更多
 

▍基本使用
 

1. 用keyframe(关键帧)定义动画（@keyframes+名字+自定义动序列）
2. 调用动画（animation-name + animation-duration，即名字+持续时间）(必须写的属性)

另： 关于动画序列，from/to等价于 0% / 100%
 

▍动画属性

animation-timing-function	动画的速度曲线	ease(默认),linear…
animation-delay	动画延迟多少后开始	0(默认)
animation-iteration-count	动画播放次数	1(默认),infinite(无限)…
animation-direction	动画下一周期是否反方向	normal(默认),alternate(逆播放)…
animation-fill-mode	动画结束后的状态	backwards(默认跳回原处),forwards(保持位置)…
animation-play-state	动画的运行or暂停	running(默认),paused…

连写：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 结束的状态( animation-play-state 不在连写之中)

即：animation: name duration timing-function delay iteration-count direction fill-mode;
 

▍补充知识——关于速度曲线

上面提到过 animation-timing-function 的默认值是ease，还可以取linear；其实还有：

ease	加快，在结束前变慢
ease-in	动画以低速开始，加快
ease-out	动画以低速结束，减慢
ease-in-out	开始和结束低速，中间快
steps()	指定了时间函数中的间隔数量（步长）

steps()就是分几步完成动画；有了steps就不要再写ease和linear了

 

 

 
▊ 一个案例

/* 基本思路是： */
/* 1.精灵图当做一个div盒子的背景，精灵图的background-position分步进行移动————hana的贴图摇动 */
/* 2.div设置为绝对定位（由于没有有定位的祖先，因此以浏览器为基准），利用left做一个动画————hana的移动 */
        
div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: url(hana.png) no-repeat;
    /* 元素可以添加多个动画，用逗号隔开 */
    animation: hana 1.5s steps(7) infinite, move 4s forwards;
    /* infinite用于让hana一直摇动；forward让hana走到中间后保持位置 */
    }
        
@keyframes hana {
	0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1400px 0;
        /* 注意给background-position负值 */
    }
}
        
@keyframes move {
    0% {
         left: -200px;
     }
     100% {
         left: 50%;
         transform: translateX(-50%);
         /* 这样就行居中的修正，省去了计算 */
     }
}

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

☀ 注

文章案例改编自《黑马程序员-web前端》

&Lolisaikou