第98天：变换transform详解

Posted 2020-10-16

变换transform详解

变换函数

translateX(x)：在水平方向移动元素，正值向右移动。

translateY(y)：在垂直方向移动元素，正值向下移动。

translate(x,y)：在水平和垂直方向移动元素。

 

scaleX(x)：在水平方向缩放元素（1.0是原始大小）。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。

scaleY(y)：在垂直方向缩放元素（1.0是原始大小）。使用负值会将元素绕x轴翻转，创建一个从下到上的镜像。

scale(x,y)：在水平和垂直方向缩放元素。

 

rotate(angle)：围绕元素中心顺时针旋转。用负值则逆时针旋转。

 

skewX(angle)：在水平方向倾斜元素。上下边缘仍然水平，左右边缘倾斜。

skewY(angle)：在垂直方向倾斜元素。左右边缘不倾斜，上下边缘倾斜。

skew(x-angle,y-angle)：在水平和垂直方向倾斜。

 

matrix(n1,n2,n3,n4,n5,n6)：用矩阵乘法来变换元素（其他所有的变换都可以使用矩阵乘法来实现）。

 

2，变换

变换是一个强大的工具，可以移动、缩放、斜切和旋转元素，扭曲它的外观。要用 transform 属性即可实现变换。

（变换不会影响页面中的其他元素，也不会影响布局。比如通过变换放大某个元素，那么该元素会简单地覆盖相邻元素）

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_987.html