css3 matrix 曲线变换,CSS3 转换方法(transform)变换矩阵 matrix() 应用实例

CSS3中,对象变换方式分为2D变换和3d变换,每种变换又有多种变换方式,其中有一种为变换矩阵matrix。它能控制一个矩阵形状、大小变来变去并能在平面上移动,具体怎么变和如何移动看下面的实例。

matrix()有六个取值,取值比较多,如果不了解每个值的含意,应用起来会让人感觉无从下手。仅文字说明并不好理解,所以下面将配合具体实例说明,下先看 matrix() 的语法规则。

一、matrix 语法规则

matrix([,]{5,5})

从表达式可以看出,matrix 可以取多组值,至少取一个值,最多取六个值;取1到4个值为矩形,取到6个值才会出现平行四边形。表达式中的{5,5}表示[,]的取值只能从1到5个值。

二、 matrix() 应用实例及参数具体含意说明

实例以 matrix(a,b,c,d,e,f) 为基础,改变 a,b,c,d,e,f 六个取值,对比形状的变化,从而知晓每个取的含意。

1、把 a 设为 0,其它全设为1,效果如下:

transform:matrix(0,1,1,1,1,1);

html代码:

transform:matrix(0,1,1,1,1,1);

CSS样式:

.matrix{transform:matrix(0,1,1,1,1,1);border:1px solid #ab9595;width:250px;height:100px;background-color:#e3e2e0;padding:8px;}

从效果图中可以看出,矩阵是一个平行四边形。

2、把 a 设为 2,其它全设为1,效果如下:

transform:matrix(2,1,1,1,1,1);www.liangshunet.com

矩阵向左边倾斜了,说明a有控制矩阵向左边倾斜的作用。

3、把 b 设为 3,a设置为0,其它全设为1,效果如下:

transform:matrix(0,3,1,1,1,1);

矩阵沿垂直方向拉长了,说明b有拉长矩阵的作用。

4、把 c 设为 3,a设置为0,其它全设为1,效果如下:

transform:matrix(0,1,3,1,1,1);

矩阵沿水平方向延伸了(向左边延伸),说明c有向左边延伸矩阵的作用。

5、把 e、f 都设为 20,a设置为0,其它全设为1,效果如下:

transform:matrix(0,1,1,1,20,20);

矩阵沿水平方向和垂直方向分别移动了20像素,说明e和f用于控制矩阵的水平和垂直位移。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值