I am trying to make a div
face towards an x
and y
position on the screen.
For example, if I have a div
at coordinates 50, 0
, and I want it to face 0, 0
, then I would need to rotate the div -90
degrees (or left).
Is there some sort of equation or function I can use to get the degrees that the div
should rotate, depending on the two sets of coordinates?
Using JavaScript:
Math.atan2(dx, dy) * 180 / Math.PI
Where
dx = p2.x - p1.x
dy = p2.y - p1.y
You can use the rotate
method to achieve the rotation of an element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: green;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg); /* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise -90 degrees.
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.