day03-前端基础

CSS3动画制作 （transform属性）

2D变形动画

1.平移 transform:translate()

transform:translate(x,y);  

+x 表示向x轴正方向移动的距离 -x表示向x轴反方向移动的距离
+y 表示向y轴正方向移动（！！！！这里的y轴正方向指的向下移动） -y表示向y轴反方向（延y轴向上移动！！！！）
示例：
transform:translate(300px,0px);
transform:translate(0px,-300px);
transform:translate(300px,300px);
transform:translate(-300px,-300px);

2.旋转 transform:rotate(45deg)

transform:rotate(180deg);
deg表示度数
正值表示顺时针旋转，负值表示逆时针旋转

注意：修改变形中心（transform-origin:top\left\right\bottom\center两两随意组合可重复）

示例：
transform-origin:center center;//表示以水平垂直中心点为变换中心
transform-origin:left top;//表示以右下为变换中心
transform-origin:rignt bottom;//表示以右下为变换中心

3.缩放 transform:scale(m,n)

m表示宽度缩放，m>1时 宽度放大  m<1时宽度缩小
n表示高度缩放， n>1时  高度放大  n<1时高度缩小

也可以这么写 transform：scale（1.2）表示宽高等比例放大1.2倍

transform:scale(1.2);

4.倾斜 tansfrom:skew（xdeg,ydeg）

	当x为正值时，延x轴反方向拉伸
	当x为负值时。延x轴正方向拉伸

注意：transform:skew(45deg);写一个值相当于只在x轴有拉伸 在Y轴没有拉伸！！！！！

3D变形动画

3D平移

transform:translate3d(x,y,z);
+x 沿着x轴正方向平移
+y 沿着y轴正方向平移
+z 沿着z轴正方向平移

3D旋转

transform:rotate3d(x,y,z,ndeg);
x:在x轴方向有旋转  1 表示有        0 没有
y:在y轴方向有旋转  1 表示有        0 没有
z:在z轴方向有旋转  1 表示有        0 没有

x轴正方向可以理解为 推一个人然后这个人倒进电脑屏幕中
y轴正方向可以理解为 开关门
z轴正方向可以理解为 电风扇（即为2D转换的旋转rotate）