CSS3新属性篇(一):transform属性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/madman0621/article/details/82431834


在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,以下将详细说明各个属性。

一、移动 translate

用法:transform: translate(45px) 或者 transform: translate(45px, 150px);

参数表示移动距离,单位px,

  • 一个参数时:表示水平方向的移动距离;
  • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

二、缩放 scale

用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);

参数表示缩放倍数;

  • 一个参数时:表示水平和垂直同时缩放该倍率
  • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

三、旋转 rotate

用法:transform: rotate(45deg);

围绕旋转中心旋转而不变形的转换,rotate()默认旋转中心为图片的中点。共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

四、倾斜 skew

用法:transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:
这里写图片描述
这里写图片描述
每个图下方都有skew的参数。粗的红色的线分别是水平垂直方向上的投影,其长度与左边的未倾斜的边是相等的。两个参数所代表的角度,就是图中黑色标记的角。需要注意的是,skew中,垂直方向代表着X轴,水平方向代表着Y轴

但是要注意的是,例如当用skew(60,60)的时候,角度的算法不是上面那样的呢,因为当两个参数的角度都大于45的时候,其实我们看到的是图形的反面,也就是长和宽交换了位置。
这里写图片描述
此时黄色的才才是投影的矩形,可以和左边的原图进行比较。而原来的粗的红色的线是错的。而角度则是黑色的标出来的!

五、matrix()函数

用法:transform: matrix(0.5, 0.2, 0, 0.5, 200, 50);

transform: matrix(数值a,数值b,数值c,数值d,数值e,数值f):

  • 数值a:水平方向上的尺寸缩放
  • 数值b:垂直方向上的倾斜率
  • 数值c:水平方向上的倾斜率
  • 数值d:垂直方向上的尺寸缩放
  • 数值e:水平方向上的移动距离
  • 数值f:垂直方向上的移动距离

使用transform属性的matrix()函数能够综合实现旋转、缩放、倾斜的2D变形。变形内容由6个数值决定,基准数值为matrix(1,0,0,1,0,0),也就是说这时的坐标没有变化。

如果需要3D变形,需要使用transform属性的matrix3d()函数。

六、事例代码

height="500" width="800" scrolling="no" title="transform属性" src="//codepen.io/madman0621/embed/pOwqzL/?height=421&theme-id=light&default-tab=result&embed-version=2" allowfullscreen="true">See the Pen transform属性 by madman0621 (@madman0621) on CodePen.

参考文献:
CSS3属性transform基本介绍
transform-skew属性方法
transform-matrix属性方法

展开阅读全文

没有更多推荐了,返回首页