css3 倒影和变形
倒影
语法：-webkit-box-reflect:direction(above | below | left | right) 间距（像素值）
注意
1.倒影产生的效果不在标准流之内
2.对box模型产生倒影
倒影加渐变
单纯使用倒影，于原图区分不大，显示不出效果，倒影一般与渐变配合使用
语法：-webkit-box-reflect:direction(above | below | left | right) 间距（像素值）-webkit-linear-gradient(direc
tion,stop,stop) || -webkit-radial-gradient(center center,stop,stop)
文本同样可以应用倒影
变形
书写方法：
transform : 变形种类的名称（对应的属性值）
多个种类之间使用空格分隔。一个( )中的属性值之间用逗号分隔。
变形种类：
rotate(指定对象的2D旋转）
语法：
transform:
rotate(30deg);
transform-origin:center
center;
注意
1、rotate（angle）:让box转angle度，如果angle>0顺时针转动，如果angle<0,逆时针转动；
2、默认是按中心点旋转
3、可以改变旋转的中心点
translate（位移）
语法：transform:translate(x,y)
第一个参数对应x轴，第二个参数对应y轴
一般不设置中心点，因为毫无影响
scale(缩放)
语法：transform:scale(number,number)
第一个参数对应x轴缩放倍数，第二个对应y轴
注意
1、scale(x,y) 让box沿着x轴和y轴缩放；当x>1就放大，反之缩小，同理y也一样
2、默认是按中心点缩放
3、可以改变缩放的中心点
skew(扭曲)
语法：transform:skew(x-angle,y-angle)
1、skew (x-angle, y-angle) 围绕 x轴 | y轴旋转产生的平面扭曲效果当x-angle>0:顺时针围绕x轴旋转x-angle度;
同理y一样
2、受中心点的影响
矩阵：
CSS3的全部变形效果均能够使用矩阵来实现
语法：transform:matrix（number,number,number,number,number,number);
1,4两个位置（a，d）用来控制缩放
5,6两个位置（e，f）用来控制平移
2,3两个位置（b，c）用来控制扭曲（倾斜）
1,2,3,4两个位置（a，b，c，d）用来控制旋转变形
当要应用两个变形种类时，如旋转和缩放同时使用，可以使用两个矩阵：
transform:matrix() matrix();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
