Javascript 使用保持偏移的平面旋转正方形

我试图在背景的同时旋转一个小正方形。轮换是个人的。所以我不能同时分组和轮换

我有背景平面的旋转角度。我不想使用画布上下文，只是数学

这就是我试图做的

    var radians = Math.abs((Math.PI / 180 ) * angle);
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var newPoint = new Object();

    newPoint.x = cos * (x-cx)-sin * (y-cy) + cx;
    newPoint.y = sin * (x-cx)+cos * (y-cy) + cy;

其中cx/cy是轴心。数学是正确的还是我遗漏了什么

我使用了javascript，但请对js进行抽象

我有图a，我想旋转两者，如图2所示。图3是我不想要的一个例子

应用户要求，我创建了一个小演示

#平面{
宽度：400px；
高度：600px；
背景：rgba（255,0,0,3）；
}
.包装纸{
位置：相对位置；
}
#方格{
位置：绝对位置；
顶部：60px；
左：20px；
宽度：40px；
高度：40px；
背景：蓝色；
}

同侧文字

对此有不同的方法。把每一件东西都看作是单独的物体，甚至是背景。其思想是在坐标系上执行变换。这里是一个画布实现。[运行]

var-box1={x:100，y:140，宽：100，高：200，枢轴x:50，枢轴y:50，旋转：20}，
框2={x:200，y:150，宽：50，高：150，轴x:10，轴y:100，旋转：40}
window.onload=函数（）{
让canvas=document.querySelector（'canvas'），
ctx=canvas.getContext（'2d'），
宽度=canvas.height=window.innerHeight，
高度=canvas.width=window.innerWidth；
渲染（ctx）
}
函数渲染（ctx）{
抽签（ctx，第1框）
抽签（ctx，第2框）
}
功能图（ctx，盒子）{
ctx.save（）
平移（box.x，box.y）//平移坐标系
ctx.rotate（box.rotate*Math.PI/180）//旋转坐标系
ctx.fillStyle=“#CCCC”
ctx.fillRect（-box.pivotX，-box.pivotY，box.width，box.height）
//画轴
ctx.fillStyle=“珊瑚”
ctx.beginPath（）
ctx.arc（0,0,4,0，Math.PI*2）
ctx.fill（）
ctx.restore（）
}

---

你能提供你想要旋转的容器的html和css吗？我已经在帖子中更新了。非常感谢。盒子的位置正好在顶部和右侧，所以“是”就是x，y。有没有一种基于纯数学的旋转方法？不使用canvas cntx？