Javascript 在较小的父对象中水平居中旋转的div

我想在较小的父对象中水平居中旋转-10度的div

我希望这样，旋转div的中点位于父块的中心。（我用一些测试文本标记了中间点，但这只是为了标记它）

怎么办

正文{
填充：0；
保证金：0；
左侧填充：300px；
溢出：隐藏；
}
导航{
高度：100vh；
宽度：300px；
位置：固定；
排名：0；
左：0；
背景色：黑色；
}
.街区{
宽度：100%；
位置：相对位置；
溢出：隐藏；
}
.旋转块{
位置：相对位置；
z指数：10；
顶部：300px；
左：0；
文本对齐：居中；
宽度：5000px；
高度：900px；
背景颜色：绿色；
变换：旋转（-10度）；
}

测试

首先将块居中（绝对定位和变换），然后旋转块

.parent{
高度：80vh；
宽度：80vw；
保证金：1em自动；
位置：相对位置；
边框：1px纯灰；
}
.孩子{
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（-10度）；
背景：红色；
宽度：110%；
高度：50px；
}
.中心{
位置：绝对位置；
宽度：10px；
高度：10px；
边界半径：50%；
背景：绿色；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

旋转的部分超出了可见区域，似乎没有逻辑@alvarotouzón错误，

nav

应该在

之外。block

然后把html放好，因为在里面