从特定点旋转 HTML 中的箭头答案

【问题标题】：Rotate an arrow in HTML from a specific point从特定点旋转 HTML 中的箭头
【发布时间】：2021-09-21 23:45:24
【问题描述】：

我已经弄清楚如何绘制箭头并旋转它：

     .arrow:after {
       content: "";
       display: inline-block !important;
       width: 0;
       height: 0;
       border-left: 8px solid white;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       vertical-align: middle;

     }

     .arrow:before {
       width: 75px;
       height: 2px;
       background: white;
       content: "";
       display: inline-block;
       vertical-align: middle;
     }


   <div style="transform: rotate(-60deg)";><span class="arrow"></span></div>

但它围绕中心旋转，而我希望它从底部旋转，例如，如果您想象坐标 (0,0) 处的箭头，我希望它始终从 (0,0) 开始，但是改变它的端点。

在this link 他们用一个箭头管理它，但我似乎不能只得到一个旋转箭头。

感谢任何帮助，谢谢！

【问题讨论】：

链接失效
所以... 将transform-origin 设置为您需要的任何值？网上有很多关于 CSS 转换基础知识的好教程，其中任何一个都涵盖了转换的那部分内容？（另外，您可能不想设置 style 属性，只需编写一个新类并将其分配给您的 div 即可。将这些技术分开以提高开发/调试工作的效率）
那个分号放错了
。它应该在那里。

标签： javascript html css svg

【解决方案1】：

在transform: rotate()下添加：

transform-origin: 0% 0%;

然后更改百分比，直到它们与您希望旋转点的位置匹配

【讨论】：