html - 在 CSS 内容属性内旋转符号而不更改其位置

Question

我想按其中心旋转符号而不移动我试图应用 display: inline-block and transform origin: center center not help, classes .toggle-children-wrapper-collapsed 和 .toggle-children-wrapper-expanded 单击更改，添加了 2 个视图，如下图所示

tree-node-expander {
    display: flex;
    align-items: center;
}

.toggle-children-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.toggle-children-wrapper {
    padding: 2px 3px 5px 1px;
}

.toggle-children-wrapper-collapsed .toggle-children {
    transform: rotate(-90deg);
}

.toggle-children-wrapper-expanded .toggle-children {
    transform: rotate(0);
}

.toggle-children:before {
    content: "\e009";
    color: #929292;
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 10px;
}

<tree-node-expander>
  <span class="toggle-children-wrapper ng-star-inserted toggle-children-wrapper-collapsed">
    <span class="toggle-children"></span>
  </span>
</tree-node-expander>

Answer 1

您可以使用transform-originCSS 属性，它允许您为平移和旋转定义自定义原点，例如：

transform: rotate(-90deg);
transform-origin: 5px 5px;

更多信息：https ://developer.mozilla.org/fr/docs/Web/CSS/transform-origin