js中怎么更改transform的值

2025-11-28 14:43:00

1、第一：概念。

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

2、第二：语法。

none:表示不进么变换；<transform-function>表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

取值：

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，他有几个属性值参数：rotate;translate;scale;skew;matrix。

1、一：使用介绍

1、用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

2、具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>transform属性的用法</title>

body{

text-align: center;

margin: 75px 175px;

}

*{padding: 0;margin: 0;list-style: none;}

#trans{width: 350px;height: 350px;background: pink;}

</style>

</head>

<body>

function rotateC(){

var trans = document.getElementById("trans");

//这里为了达到效果，给变量设定了一个默认值，而没有对变量进行操作

var rt = "30deg";

trans.style.transform = "rotate("+ rt +")";

}

</script>

</body>

</html>

js中怎么更改transform的值

2、二：测试

3.1 使用谷歌浏览器打开页面

3.2 单击选择旋转30度如下所示。

js中怎么更改transform的值

1、一：使用介绍

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

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

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

2、具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>transform属性的用法</title>

*{padding: 0;margin: 0;list-style: none;}

body{text-align: center;margin: 75px 175px;}

div{width: 350px;height: 350px;}

</style>

</head>

<body>

<button onclick="translateXY('150px','55px')">xy轴同时移动</button>

</div>

var trans = document.getElementById("trans");

function translateXY(tx,ty){

trans.style.transform = "translate("+ tx +","+ ty +")";

}

function translateX(tx){

trans.style.transform = "translateX("+ tx +")";

}

function translateY(ty){

trans.style.transform = "translateY("+ ty +")";

}

</script>

</body>

</html>

js中怎么更改transform的值

2、二：测试

3.1 使用谷歌浏览器打开页面

3.2 xy轴同时移动，测试函数translate

3.3 x轴移动75px，测试函数translateX

3.4 y轴移动85px，测试函数translateY

js中怎么更改transform的值

1、一：使用介绍

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

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率

两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

2、具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>transform属性的用法</title>

*{padding: 0;margin: 0;list-style: none;}

body{text-align: center;margin: 75px 175px;}

div{width: 350px;height: 350px;}

</style>

</head>

<body>

<button onclick="scaleXY(0.5,0.5)">xy轴同时缩小一半</button>

<button onclick="scaleX(0.4)">x轴缩小为原来的0.4</button>

<button onclick="scaleY(0.3)">y轴缩小为原来的0.3</button>

</div>

var trans = document.getElementById("trans");

function scaleXY(tx,ty){

trans.style.transform = "scale("+ tx +","+ ty +")";

}

function scaleX(tx){

trans.style.transform = "scaleX("+ tx +")";

}

function scaleY(ty){

trans.style.transform = "scaleY("+ ty +")";

}

</script>

</body>

</html>

js中怎么更改transform的值

2、二：测试

3.1 使用谷歌浏览器打开页面

3.2 xy轴同时缩小一半，测试函数scale

3.3 x轴缩小为原来的0.4，测试函数scaleX

3.4 y轴缩小为原来的0.3，测函数scaleY

js中怎么更改transform的值

1、使用介绍

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

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

一个参数时：表示水平方向的倾斜角度；

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

2、具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>transform属性的用法</title>

*{padding: 0;margin: 0;list-style: none;}

body{text-align: center;margin: 75px 175px;}

div{width: 350px;height: 350px;}

</style>

</head>

<body>

<button onclick="skewXY('30deg','30deg')">xy轴同时倾斜</button>

</div>

var trans = document.getElementById("trans");

function skewXY(tx,ty){

trans.style.transform = "skew("+ tx +","+ ty +")";

}

function skewX(tx){

trans.style.transform = "skewX("+ tx +")";

}

function skewY(ty){

trans.style.transform = "skewY("+ ty +")";

}

</script>

</body>

</html>

js中怎么更改transform的值

2、二：测试

3.1 使用谷歌浏览器打开页面

3.2 xy轴同时倾斜，测试函数skew

3.3 x轴倾斜35度，测试函数scaleX

3.4 y轴倾斜25度，测函数scaleY

js中怎么更改transform的值

1、一：基准点 transform-origin

1、在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

2、用法：transform-origin: 10px 10px;

3、共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

2、二：多方法组合变形

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

3、矩阵matrix用法：

1、用法如下图所示

2、具体代码如下所示：

<!DOCTYPE html>

<html>

<head>

<title>transform属性的用法</title>

.matrix_box { width:150px; height:150px; background-color:#a0b3d6; }

</style>

</head>

<body>

<button id="matrixButton1" type="button">点击应用matrix(1,0,0,1,30,30)</button>

<button id="matrixButton2" type="button">点击应用translate(30,30)</button>

var $ = function(selector) {

return document.querySelector(selector);

};

var $css3Transform = function(element, value) {

var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;

for (var i=0; i < length; i+=1) {

element.style[arrPriex[i] + "Transform"] = value;

}

};

if ($ && window.addEventListener) {

$("#matrixButton1").addEventListener("click", function() {

$css3Transform($("#matrixBox1"), "matrix(1,0,0,1,30,30)");

});

$("#matrixButton2").addEventListener("click", function() {

$css3Transform($("#matrixBox2"), "translate(30px,30px)");

});

} else {

alert("目前浏览器不支持CSS3 transform, 请试试其他浏览器");

}

</script>

</body>

</html>

js中怎么更改transform的值

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。