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

Question

我想在不移动的情况下按中心旋转符号我尝试应用 display: inline-block 和 transform origin: center center 没有帮助，类 .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-origin CSS 属性，它允许您定义平移和旋转的自定义原点，例如：

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

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

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

Rotate symbol inside CSS content property without changing its position

html

css

angular

angular-tree-component

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

Rotate symbol inside CSS content property without changing its position

html

css

angular

angular-tree-component

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