Calculate the coordinates of the elements after rotation

how to use JavaScript to calculate the coordinates of x2 and y2 after the elements in the figure are rotated?

the center point of rotation is the center point of dashed wireframe


is a geometric problem.

The coordinate system on the

page has the same X axis, negative on the left, positive on the right, negative on the top and positive on the bottom

.

1 the box on your picture is a green rectangle in my picture

2 flatten the green box, and the red rectangle
rotation point in my picture is set to the coordinate system origin X0Y0
so your red rectangle coordinates Xr Yr

3 rotate to the blue rectangle position
the upper left corner of the blue rectangle coordinates Xb Yb
the beveled edge is half the width, which is Xr, coordinate Xb, Yb is the adjacent side and opposite side, and the basic trigonometric function can be used to OK

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rotate Calc</title>
    <style type="text/css">
    .calc {font-family:Consolas, monospace;white-space:pre;}
    .base {position:relative;margin-top:100px;margin-left:50px;}
    .base .box {position:absolute;top:0;left:0;width:300px;height:200px;transform-origin:center top;}
    .base .deg-0  {background-color:rgba(255,0,0,0.3);transform:rotate(0deg);}
    .base .deg-12 {background-color:rgba(0,255,0,0.3);transform:rotate(-12deg);}
    .base .deg-r  {background-color:rgba(0,0,255,0.3);transform:rotate(-22deg);}
    </style>
</head>
<body>
<div class="calc">
width  = 259.69
height = 173.126

Xo = 0
Yo = 0
Xr = - width / 2 // = -129.845
Yr = 0

deg = -12
Xg  = Xr * Math.cos(deg * Math.PI / 180) // -127.008
Yg  = Xr * Math.sin(deg * Math.PI / 180) // 26.996

deg = -22
Xb  = Xr * Math.cos(deg * Math.PI / 180) // -120.390
Yb  = Xr * Math.sin(deg * Math.PI / 180) //   48.640
</div>
<div class="base">
    <div class="box deg-0"></div>
    <div class="box deg-12"></div>
    <div class="box deg-r"></div>
</div>
</body>
</html>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3226f-2bde5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3226f-2bde5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?