Rotate twice from two origin

Issue

I have a css div I want first to rotate at 180deg from the center origin and then rotate from -45deg from the "new" bottom left corner. But I don't manage to apply two different rotations

https://imgur.com/a/9GSToEx -> So you can better understand

CSS

.player1{
    background-color: blueviolet;
    transform-origin: center;
    transform: rotate(180deg);
    transform-origin: bottom left;
    transform: rotate(45deg);
}

HTML

<div class="player1">
            <div class="questionSpace"></div>
        </div>

Thank you ^^

Solution

This can be a bit tricky because of the need to move the origin and the rotations not being additive.

A fairly straightforward way of getting round the problem is to enclose the element in a parent whose sole purpose is to allow an independent 180deg rotation.

This snippet colors the player1 element with a linear-gradient so it can be seen that the 180deg rotation has taken place.

.player1container {
  display: inline-block;
  transform: rotate(180deg);
  margin: 20vmin;
  /* added just for demo */
}

.player1 {
  background-color: blueviolet;
  width: 20vmin;
  height: 10vmin;
  background-image: linear-gradient(red, blue);
  transform: rotate(-45deg);
  transform-origin: top right;
}

<div class="player1container">
  <div class="player1">
    <div class="questionSpace"></div>
  </div>
</div>

Answered By - A Haworth