How to modify the transform attribute of an element in jquery-Front-end Q&A-php.cn

How to modify the transform attribute of an element in jquery

WBOY

Release： 2022-09-09 15:50:15

Original

2473 people have browsed it

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");".

How to modify the transform attribute of an element in jquery

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");

Copy after login

Set CSS properties

To set a specific CSS property, use the following syntax:

css("propertyname","value");

Copy after login

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>

Copy after login

Output result:

How to modify the transform attribute of an element in jquery

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!