思路：外层旋转后坐标，元素旋转后坐标，计算偏移坐标

<template><div class="outbox"><label>角度: <input v-model.number="rotate" type="number" /></label><br><div class="resizebox" :style="{width: `${resize.w}px`, height: `${resize.h}px`, transform: `translate(${resize.x}px, ${resize.y}px) rotate(${rotate}deg)`}"></div><div :class="['itxm', `itxm-${idx}`]" v-for="(item, idx) in points" :key="idx" :style="{width: `${item.w}px`, height: `${item.h}px`, transform: `translate(${item.x}px, ${item.y}px) rotate(${rotate}deg)`}">{{idx+1}}</div></div>
</template>
<script>export default {name: 'HelloWorld',data() {return {rotate: 15,resize: {x: 200,y: 200,w: 500,h: 300,r: 60},points: [{x: 200,y: 200,w: 50,h: 30,r: 0},{x: 650,y: 200,w: 50,h: 30,r: 0},{x: 300,y: 300,w: 50,h: 30,r: 0},{x: 200,y: 470,w: 50,h: 30,r: 0},{x: 650,y: 470,w: 50,h: 30,r: 0}]};},watch: {rotate() {this.watchRotate();}},mounted() {this.watchRotate();},methods: {watchRotate() {const cx = this.resize.x+this.resize.w/2const cy = this.resize.y+this.resize.h/2this.points.forEach(v => {if (!v.oldx) v.oldx = v.xif (!v.oldy) v.oldy = v.y// resize旋转为矩形参考const rotateEnd = this.recaculateXY({x: v.oldx || v.x, y: v.oldy || v.y, cx, cy, rotate: this.rotate})const rotateThis = this.recaculateXY({x: v.x, y: v.y, cx: v.x+v.w/2, cy: v.y+v.h/2, rotate: this.rotate})// 外层旋转坐标偏移 - 自身旋转坐标偏移const rangex = rotateEnd.x - rotateThis.xconst rangey = rotateEnd.y - rotateThis.yv.x += rangexv.y += rangey})},recaculateXY({x, y, cx, cy, rotate}) {// 矩阵公式const rad = (rotate * Math.PI) / 180;const rotatedX = (x - cx) * Math.cos(rad) - (y - cy) * Math.sin(rad) + cxconst rotatedY = (x - cx) * Math.sin(rad) + (y - cy) * Math.cos(rad) + cyreturn {x: rotatedX, y: rotatedY}},},
};
</script><style scoped>
.outbox {position: relative;
}
.resizebox {width: 500px;height: 300px;border: 1px dotted blue;position: absolute;left: 0;top: 0;&::after {content: '';width: 100%;height: 1px;background: red;display: block;position: absolute;top: 50%;}&::before {content: '';width: 1px;height: 100%;background: red;display: block;position: absolute;left: 50%;}
}
.itxm {background: green;position: absolute;left: 0;top: 0;
}
.itxm-1 {background: orange;
}
.itxm-2 {background: rebeccapurple;
}
</style>

–end