如何在CSS中修改元素的旋转中心？

首先先修正你提供代码里的几处拼写/语法错误：

• margine 应为 margin
• rotatz 应为 rotate
• style属性的引号未闭合

修正后的基础代码：

<!DOCTYPE html>
<html>
<head>
    <title>dafter</title>
</head>
<body>
    <hr style="margin: 20px; transform: rotate(20deg);">
</body>
</html>

要修改旋转元素的旋转中心，直接使用CSS的 transform-origin 属性即可。这个属性用于定义元素变换（包括旋转）的基准点，默认值是 50% 50%，也就是元素自身的中心位置。

常见用法示例： #

• 以元素左上角为旋转中心：

<hr style="margin: 20px; transform: rotate(20deg); transform-origin: 0 0;">

• 以元素右上角为旋转中心：

<hr style="margin: 20px; transform: rotate(20deg); transform-origin: 100% 0;">

• 以元素底部中间为旋转中心：

<hr style="margin: 20px; transform: rotate(20deg); transform-origin: center bottom;">

• 用具体像素值定义旋转中心（比如距离左边缘20px、上边缘10px的位置）：

<hr style="margin: 20px; transform: rotate(20deg); transform-origin: 20px 10px;">

transform-origin 支持百分比、长度值，或是 left/right/center/top/bottom 这类关键字，组合使用就能灵活设置旋转的基准点。

内容的提问来源于stack exchange，提问作者ahmedalkhalil