Home > Article > Web Front-end > How to modify the transform attribute of an element in jquery
How to modify the transform attribute of an element in jquery
- WBOYOriginal
- 2022-09-09 15:50:152370browse
In jquery, you can use the css() method to modify the transform attribute of an element; the css() method can be used to set or return one or more style attributes of the selected element, and the transform attribute can be used to To set the rotation, scaling, movement or tilt style of an element, the syntax is "$(specified element).css("transform","modified transform attribute value");".
The operating environment of this article: Windows 10 system, jquery version 3.6.1, Dell G3 computer.
How jquery modifies the transform attribute of an element
Use the jQuery css() method
css() method to set or return One or more style attributes of the selected element.
Return CSS properties
To return the value of the specified CSS property, please use the following syntax:
css("propertyname");Set CSS properties
To set a specific CSS property, use the following syntax:
css("propertyname","value");The transform attribute applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css("transform","rotate(-9deg)");
});
});
</script>
</head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
<body>
<div>Hello World</div>
<button>设置div元素的transform属性</button>
</body>
</html>Output result:
Related tutorial recommendations: jQuery video tutorial
The above is the detailed content of How to modify the transform attribute of an element in jquery. For more information, please follow other related articles on the PHP Chinese website!