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();