css3笔记3

css3 2D变换

• 相关属性

transform 2d/3d属性转换

transform-origin 更改旋转基点

• 2d动画方法

1.位移

translate(x,y) 沿着x轴y轴移动

translateX(n) 沿着x轴移动

translateY(n) 沿着y轴移动

2.缩放

scale(x,y)更改元素的宽度和高度，将元素的宽度变为原来的x倍，将元素的高度变为原来的y倍

scaleX(n) 更改元素宽度

scaleY(n) 更改元素高度

3.旋转

rotate(angle)

4.斜切（只存在于2d当中）

skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴

skewX(angle) 沿着x轴旋转

skewY(angle) 沿着y轴旋转

css3 3D变换

• 3d属性

transform 2d/3d转换

transform-origin 更改旋转基点

transform-style:preserve-3d

perspective 视距/透视效果 参考

perspective-origin 景深基点（观察物体角度）

backface-visibility:visible | hidden 背面隐藏

• 3d方法

translate3d(x位移，y位移，z位移)

scale3d(x宽倍数，y宽倍数，z元素在z轴的缩放倍数)

rotate3d(x,y,z,angle)

css3 动画

• 相关属性

@keyframes 设定关键帧

animation 所有动画的简写属性，除了animation-play-state以外

animation-name 通过动画名称调用关键帧

animation-duration 动画所需时间 s/ms

animation-timing-function 动画执行速度

animation-delay 延迟

animation-iteration-count 动画播放次数，默认为1，可以定义为一个数字代表次数。无数次为infinite

animation-direction 是否循环交替反向播放动画

animation-play-state 动画运行或者暂停

animation-fill-mode 动画在播放之前或者之后，动画效果是否可见

• 关键帧的设定

格式一般为：

@keyframes move {
	0% {
	
	}
	50% {
	
	}
	100% {
	
	}
}

注：move为关键帧的名字，想要使用关键帧来运行动画，需要通过animation：关键帧名 来调用关键帧，并且执行。