js中怎么更改transform的值

电脑

前端编辑工具HBuilder或者文本编辑器

第一：概念。1、Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。

第二：语法。  transform ： none | [ ]*   也就是：   transform: rotate | scale | skew | translate |matrix;none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。取值：transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个属性值参数：rotate;translate;scale;skew;matrix。

一：使用介绍1、用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。2、具体代码如下所示：

二：测试3.1 使用谷歌浏览器打开页面3.2 单击选择旋转30度如下所示。

一：使用介绍1、用法：transform: translate(45px)  或者 transform: translate(45px, 150px);参数表示移动距离，单位px，一个参数时：表示水平方向的移动距离；两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。2、具体代码如下所示：

二：测试3.1 使用谷歌浏览器打开页面3.2 xy轴同时移动，测试函数translate3.3 x轴移动75px，测试函数translateX3.4 y轴移动85px，测试函数translateY

一：使用介绍1、用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。2、具体代码如下所示： xy轴同时缩小一半 x轴缩小为原来的0.4 y轴缩小为原来的0.3

二：测试3.1 使用谷歌浏览器打开页面3.2 xy轴同时缩小一半，测试函数scale3.3 x轴缩小为原来的0.4，测试函数scaleX3.4 y轴缩小为原来的0.3，测函数scaleY

1、使用介绍1、用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);参数表示倾斜角度，单位deg一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。2、具体代码如下所示： xy轴同时倾斜 x轴倾斜35度 y轴倾斜25度

二：测试3.1 使用谷歌浏览器打开页面3.2 xy轴同时倾斜，测试函数skew3.3 x轴倾斜35度，测试函数scaleX3.4 y轴倾斜25度，测函数scaleY

一：基准点 transform-origin1、在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。2、用法：transform-origin: 10px 10px;3、共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

二： 多方法组合变形1、综合使用这几个方法来对一个元素进行多重变形。1.1、用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);1.2这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

矩阵matrix用法：1、用法如下图所示2、具体代码如下所示：

点击应用matrix(1,0,0,1,30,30)

点击应用translate(30,30)