JSFiddle - React, Tailwind, and code Playground

by dahousecat

HTML

<div class="point1 point"></div>
<div class="point2 point"></div>
<div class="point3 point"></div>
<div class="point4 point"></div>
<div class="origin point"></div>

<div class="point5 point"></div>
<div class="point6 point"></div>
<div class="point7 point"></div>
<div class="point8 point"></div>

CSS

.point {
    position: absolute;
    width: 5px;
    height: 5px;
    background: blue;    
}
.point1 {
    top: 20px;
    left: 20px;    
}
.point2 {
    top: 20px;
    left: 60px;   
}
.point3 {
    top: 40px;
    left: 60px;   
}
.point4 {
    top: 40px;
    left: 20px;   
}
.origin {
    top: 60px;
    left: 80px;
    background: red;
}

JavaScript

function rotate_point(pointX, pointY, originX, originY, angle) {
    angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
        y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
    };
}

var angle = 150;

var point1 = $('.point1').position();
var point2 = $('.point2').position();
var point3 = $('.point3').position();
var point4 = $('.point4').position();
var origin = $('.origin').position();

var new_point1 = rotate_point(point1.left, point1.top, origin.left, origin.top, angle);
var new_point2 = rotate_point(point2.left, point2.top, origin.left, origin.top, angle);
var new_point3 = rotate_point(point3.left, point3.top, origin.left, origin.top, angle);
var new_point4 = rotate_point(point4.left, point4.top, origin.left, origin.top, angle);

$('.point5').css({top: new_point1.y, left: new_point1.x});
$('.point6').css({top: new_point2.y, left: new_point2.x});
$('.point7').css({top: new_point3.y, left: new_point3.x});
$('.point8').css({top: new_point4.y, left: new_point4.x});