在 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 倾斜角度的计算方式表面上看并不是那么直观, 这里借鉴某大拿绘制的图举例说明一下:
vc/yyc+1xM2207CjrMbks6S2yNPr1/Ox37XEzrTH49CxtcSx38rHz+C1yLXEoaPBvbj2ss7K/cv5tPqx7bXEvce2yKOsvs3Kx8281tC62smrseq8x7XEvceho9Do0qrXotLitcTKx6Osc2tld9bQo6y0udaxt73P8rT6se3XxVjW4aOsy67Gvbe9z/K0+rHt18VZ1uGhozwvcD4NCjxwPrWrysfSqtei0uK1xMrHo6zA/cjntbHTw3NrZXcoNjAsNjAptcTKsbryo6y9x7bItcTL47eosrvKx8nPw+bEx9H5tcTE2KOs0vLOqrWxwb249rLOyv21xL3Htsi2vLTz09o0NbXEyrG68qOsxuTKtc7Sw8e/tLW9tcTKx8280M61xLe0w+ajrNKyvs3Kx7Okus2/7b27u7vBy8671sOhozxiciAvPg0KPGltZyBhbHQ9"这里写图片描述" src="/uploadfile/Collfiles/20180906/20180906093832273.png" title="\" />
此时黄色的才才是投影的矩形, 可以和左边的原图进行比较. 而原来的粗的红色的线是错的. 而角度则是黑色的标出来的!
五, 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() 函数.
事例代码:
参考文献:
CSS3 属性 transform 基本介绍
transform-skew 属性方法
transform-matrix 属性方法
来源: https://www.2cto.com/kf/201809/777060.html