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

 

css3 倒影和变形,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。