css的那些事

css的那些事

transform多重变形的顺序问题

变形的执行顺序从右到左,rotate的作用原点是元素变形前位置的中心点，而非当前元素位置的中心点。
图片:

	transform: translate(100px, 100px) rotate(45deg);
	transform: rotate(45deg) translate(100px, 100px);

filter(滤镜)

filter: blur(3px);
filter: brightness(0.5)
filter: grayscale(100%);
filter: drop-shadow(4px 0 4px #000000);
filter: saturate(50%);
filter: invert(100%);
filter: hue-rotate(10deg);

滤镜效果	作用函数	说明
无	none	默认值，表示没有效果
模糊	blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
亮度	brightness(number)	number越大图像越亮，number不能取负值，可以是整数也可以是百分比
灰度	grayscale(%)	将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值
对比度	contrast(%)	默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度
阴影	drop-shadow(h-shadow v-shadow blur spread color)	作用效果可参考box-shadow
反转图像	invert(%)	默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值
不透明度	opacity(%)	默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值
图像转为棕褐色	sepia(%)	默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值
饱和度	saturate(%)	默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值
色相旋转	hue-rotate(deg)	该值用来定义色环的度数，默认值为 0deg，代表原始图像，最大值为 360deg

transform与postion: fixed的冲突问题

如果在带有transform属性的父容器中添加一个postion：fixed的子元素，那么该子元素是相对于带有transform熟悉的父容器定位而非相对于viewport进行定位的。
w3c上有说明，当容器设置了transform属性时会生成新的bfc。这会导致fixed定位的元素根据新的bfc进行定位。

解决方法

可以将postion：fixed容器通过js放到body容器或者更容器下。