Rotate only the ::after content, not the whole element

Question

I have the following CSS class which represents a Tile in a grid.

.col {
  background: #ffffff;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  min-width: 25px;
  height: 100%;
  border-right: 1px solid #afd8f8;
  border-bottom: 1px solid #afd8f8;
}

I later on add the following CSS class with JavaScript to the Tile, this CSS class represents a Player:

.player {
  position: relative;
  &::after {
    z-index: 99;
    content: "";
    width: 18px;
    height: 18px;
    position: relative;
    background: url(./../assets/player.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Here is the player.svg:

A Tile div that contains the player ends up looking like this:

<div class="col player">< /div>

I would like to animate the player so that when he goes up he rotates -90deg.

I'm trying to add this functionality with JavaScript but it seems that I'm rotating the whole div (messing up some of my game logic). I'm looking forward to only rotating the Player not the whole div.

I've tried the following:

grid[i][j].DOMElement.style.transform = 'rotate(-90deg)';

grid[i][j].DOMElement returns the HTMLElement for a specific Tile.

But as I said before this rotates the entire div...

Any help will be appreciated. Thanks in advance!

https://stackoverflow.com/questions/2701192/what-characters-can-be-used-for-up-down-triangle-arrow-without-stem-for-displa — Mister Jojo, Jul 15 '21 at 17:57

score 2 · Accepted Answer · answered Jul 15 '21 at 17:51

Probably easiest to add a class to the parent, and use that to modify the ::after

.player {
  position: relative;
  &::after {
    z-index: 99;
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    position: relative;
    background: url(./../assets/player.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  &.rotated::after {
    transform: rotate(-90deg)
  }
}

grid[i][j].DOMElement.classList.add("rotated")

Rotate only the ::after content, not the whole element

1 Answers1