Search code examples
htmlcssangularangular-tree-component

Rotate symbol inside CSS content property without changing its position

I want to rotate symbol by its center without move I tried to apply display: inline-block and transform origin: center center not helped, classes .toggle-children-wrapper-collapsed and .toggle-children-wrapper-expanded changes by click, added 2 views as picture below

enter image description here

enter image description here

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>

Solution

  • You can use transform-origin CSS property, that allow you to define custom origin for translations and rotations, for example:

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

    More information: https://developer.mozilla.org/fr/docs/Web/CSS/transform-origin