CSS3动画学习笔记.pdf

CSS3动画学习笔记

CSS3综合部分

2D转换(transform)

转换是CSS3中具有颠覆性的特征之⼀，可以实现元素的位移、旋转、变形、缩放

位移(改变元素位置)

translate(x,y)

定义2D转换，沿着X和Y轴移动元素。

例如:

.box{

transform:translate(100px,200px)

}

使⽤⽅式介绍:

基本写法:

transform:translate(length,length);

总结:

1.最多能设置两个值,⼀个值⽤来改变⽔平,另外⼀个⼀个值⽤来改变垂直⽅向

2.如果设置两个值,第⼀个值代表⽔平,第⼆值代表垂直

3.如果希望让元素逆⽅向移动,可以设置负数

4.通过位移⽅式改变元素位置,设置的值就是相对元素本⾝宽度和⾼度(可以设置百分⽐)

5.如果设置⼀个值,那么元素只能在⽔平⽅向移动

2D位移⽅式实现定位元素居中

position:absolute

left:50%

top:50%

transform:translate(-50%,-50%)

旋转

rotate(angle)

定义2D旋转，在参数中规定⾓度。

基本使⽤:

transform:rotate(angle)

总结:

1.设置的值代表旋转的⾓度(单位deg)

2.通过设置正负数的⽅式,控制元素顺时针(正数)或者逆时针旋转(负数)

3.可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center

✔设置⽅式可以使⽤以下⽅式:

transform-origin:leftbottom;

transform-origin:100px100px

例如:

transform:rotate(-45deg)

总结

1.旋转圆点

2.顺时针旋转,逆时针旋转

缩放(改变元素⼤⼩)

scale(x,y)

定义2D缩放转换，改变元素的宽度和⾼度。

总结

基本使⽤⽅式:

transform:scale(0,0)

总结:

1.最多能设置两个值,⼀个值⽤来改变宽度,另外⼀个值⽤来改变⾼度

2.设置缩放的时候,不需要带单位,代表的是倍数

3.第⼀个值代表宽度,第⼆个值代表⾼度

4.如果希望元素缩⼩,那么设置的值在0-1之间的⼩数

5.如果设置⼀个值,代表元素宽度和⾼度同时放⼤或者缩⼩相应的倍数

倾斜(了解)

skew(x-angle,y-angle)

定义2D倾斜转换，沿X和Y轴。

总结

注意:transform是⼀个复合属性,如果设置多个值,那么需要按照复合属性的写法去写;

transform:translate(600px)rotate(360deg)scale(0.5,0.5);

3D转换(transform)

3D坐标系

☞坐标系:

x轴: