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

Rotation-rotate triangulation coordinate-conversion

Jul.16,2022

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>

Previous: How to block SHOW COLUMNS by thinkphp3.2

Next: How does the yarn add command implement temporary installation dependencies?