Rotate twice from two origin-CodePudding

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 >
            <div ></div>
        </div>

Thank you ^^

CodePudding user response：

Hmm. Your code is wrong, because this rules have conflict and last rule have more priority;

transform: rotate(180deg);
...
transform: rotate(45deg);

You need to use @keyframes

for example:

@rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg); 
  } 
  100% {
   transform-origin: left;
   transform: rotate(45deg); 
  }
 }

and then you need to use animation: rotate;

CodePudding user response：

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 >
  <div >
    <div ></div>
  </div>
</div>