用CSS3使你的网页"动"起来——transform属性

转换

什么是转换

改变元素在页面上的大小，位置，形状以及角度的一种方式

可以向元素应用2D以及3D的转换效果

转换属性

(1)转换效果

属性：transform

取值：1.none：默认值，即没有任何转换效果

2.一个或多个转换函数，如果是多个转换函数，中间用”空格隔开”

(2)转换的原点

属性：transform-origin

取值：

1.两个值：表示原点在x轴和y轴的位置

2.三个值：表示原点在x轴，y轴和z轴的位置

可以取数值/百分比/关键字

2D转换

位移：改变元素在页面上的位置

属性：transform

取值：

1.translate(x)：x取值为正，向右移动;x取值为负，向左移动

2.translate(x,y)：x同上;y取值为正，下移;y取值为负，向下移动

3.translateX(x)

4.translateY(y)

缩放

属性：transform

取值：

1、scale(value)：value表示的是x轴和y轴的缩放倍率

2、scale(x,y)

3、scaleX(x)

4、scaleY(y)

注：x，y的取值 默认为1;放大：大于1的数值;缩小：0-1之间的数字

旋转：改变元素在页面上的角度

属性：transform

取值：rotate(ndeg)

取值为正，顺时针旋转

n取值为负，逆时针旋转

注意： 1、转换原点你会影响旋转效果

2、旋转操作时，连同坐标轴一同都跟着转

倾斜：改变 元素在页面中的形状

属性：transform

取值：1、skewX(ndeg) 让元素向横向倾斜

n取值为正，y轴逆时针倾斜

n取值为负，y轴顺时针倾斜

2、skewY(ndeg) 让元素向纵向倾斜

n取值为正，x轴顺时针倾斜

n取值为负，x轴逆时针倾斜

3、skew(x)

4、skew(x，y)

3D转换

属性：perspective

作用：模拟 人眼睛 到3D转换物体的距离，取值越大，表示离物体越远，取值越小，表示离物体越近

取值：以px为单位的数值

注意：该属性要加在3D转换元素的父元素上 3D旋转

属性：transform

取值：rotateX(xdeg)：以x轴为中心轴，旋转元素

rotateY(ydeg)：以y轴为中心轴，旋转元素

rotateZ(zdeg)：以z轴为中心轴，旋转元素

rotate3D(x,y,z,ndeg)：x,y,z取值大于0的话，则该轴参与旋转;x,y,z取值为0的话，则该轴不参与旋转

过渡

什么是过渡

使得CSS的属性值在一段时间内平缓变化的效果

过渡能观察到元素的属性值得变化过程 过渡四要素(四属性)

(1)指定过渡属性

作用：指定那个CSS属性值在变化时需要使用过渡的效果。当指定属性值发生变化时，过渡就会被触发

语法：transition-property

取值： 1.属性名称

2.none：默认值

3.all

允许设置过渡的属性：1、颜色属性

2、取值为数字的属性

3、转换属性-transform

4、渐变属性

5、visibility

6、阴影属性

(2)指定过渡时长:过渡的效果要在多长时间内完成

属性：transition-duration

取值：以s或ms为单位的数值

默认值为0，意味着不会有过渡效果

(3)指定过渡的速度时间曲线函数

属性：transition-timing-function

取值：

1、ease 默认值，慢速开始，快速变快，慢速结束

2、linear 匀速

3、ease-in 慢速开始，加速结束

4、ease-out 快速开始，减速结束

5、ease-in-out 慢速开始和结束，中间先加后减

(4)指定过渡延迟:当用户激发操作后等待多长时间再显示效果

属性：transition-delay

取值：以s或ms为单位的数值

动画

1、什么是动画

动画指使元素从一种样式逐渐变化为另一种样式的过程

动画是复杂版的过渡效果

本质：使用”关键帧”，来定义动画的每一步

关键帧：包含 运行的时间点以及动作(样式)

2、动画的使用步骤

(1)声明动画

指定动画名称以及涉及到的关键帧们

(2)为元素调用动画

指定元素使用哪个动画效果

3、声明动画

样式表中，通过 @keyframes 规则来声明动画

@keyframes 动画名称{

0%{

/*动画开始时，元素的样式*/

属性：值;

属性：值;

}

50%{

/*动画执行到一半时，元素的样式*/

}

100%{

/*动画结束时，元素的样式*/

}

}

动画声明的浏览器兼容性：

@-moz-keyframes动画名{ … }

@-webkit-keyframes动画名{ … }

@-o-keyframes动画名{ … }

4、调用动画

(1)animation-name：要调用的动画名称

(2)animation-duration：动画完成一个周期需要的时长

取值：以s或ms为单位的数值

(3)animation-timing-function：指定动画的速度时间曲线函数

取值：ease、linear、ease-in，ease-out、ease-in-out

(4)animation-delay：指定动画的播放延迟

(5)animation-iteration-count：指定动画的播放次数

取值：1.默认值为1，只播放一次

2.自定义数值

3.infinite，表示无限次播放

(6)animation-direction：指定动画的播放方向

取值： 1、normal：正向播放，从0%~100%

2、reverse：逆向播放，从100%~0%

3、alternate：轮流播放，基数次数播放时，正向播放，偶数次数播放时，逆向播

(7)animation-flill-mode(不属于简写里)

作用：动画的填充模式，指动画在播放之前或播放之后的显示效果

取值：none 默认值，无任何效果

forwards 当动画播放完成之后，元素将保持在最后一个帧的状态上

backwards 动画播放前，在延迟时间内，动画将保持在第一帧的状态上

both 动画播放前后，分别应用在第一帧和最后一帧的状态上

(8)animation-play-state

作用：指定动画处于 播放状态 还是 暂停状态

取值： paused 动画暂停

running 动画播放