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

▊ 什么是转换（transform）？

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

▍ 移动（translate）

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

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

▍旋转（rotate）

transform: rotate(度数);

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

▍缩放（scale）

transform: scale(x, y);

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

▍变换中心（transform-origin）

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

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

▍综合性写法（连写）

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

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

▊ 什么是动画（animation）？

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

▍基本使用

用keyframe(关键帧)定义动画（@keyframes+名字+自定义动序列）
调用动画（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

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

猜你喜欢