CSS3---transform、transition用法总结

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

分类	属性值	说明	举例
移动	translate(x,y)	2D 转换	transform: translate(100px, 200px)
	translate3d(x,y,z)	3D 转换
	translateX(x)	沿着x 轴转换	transform: translateX(100px)
	translateY(y)	沿着 y轴转换
	translateZ(z)	沿着 z 轴转换
缩放	scale(x,y)	2D 缩放转换 x 水平缩放 y垂直缩放 如果只写一个参数， 宽度和高度都缩放	transform: scale(0.1)
	scale3d(x,y,z)	3D 缩放转换
	scaleX(x)
	scaleY(y)
	scaleZ(z)
旋转	rotate(angle)	2D 旋转	transform: rotate(2000deg)
	rotate3d(x,y,z,angle)	3D 旋转
	rotateX(angle)
	rotateY(angle)
	rotateZ(angle)
		改变中心点	transform-origin: 水平位置 垂直位置;
倾斜	skew(x-angle,y-angle)	沿着 X 和 Y 轴的 2D 倾斜转换	transform: skew(-30deg, -30deg)
	skewX(angle)	沿着x 轴的 2D 倾斜转换
	skewY(angle)	沿着Y 轴的 2D 倾斜转换。
透视	perspective(n)	为 3D 转换元素定义透视视图。	perspective也可作为属性； perspective视距:眼睛到屏幕的距离。视距越大,  效果越不明显；视距越小，透视效果越明显。一般放在body样式中。 body{perspective: 300px;}

 

transition属性结合transform使用，用来设置transform转换的过渡效果。

 

复合写法： transition: all 5s linear;	第一个属性值：transition-property 第二个属性值：transition-duration 第三个属性值：transition-timing-function
transition-property 设置过渡效果的 CSS 属性的名称	none没有属性会获得过渡效果 all所有属性都将获得过渡效果 property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration 完成过渡效果需要多少秒或毫秒	time
transition-timing-function 规定速度效果的速度曲线	linear以相同速度开始至结束的过渡效果 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 ease-in以慢速开始的过渡效果 ease-out以慢速结束的过渡效果 ease-in-out 以慢速开始和结束的过渡效果 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 定义过渡效果何时开始	time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。