从两个原点旋转两次

Question

我有一个 css div，我想首先从中心原点旋转 180 度，然后从“新”左下角从 -45 度旋转。 但我没有设法应用两种不同的旋转

https://imgur.com/a/9GSToEx -> 让你更好地理解

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>

谢谢你^^

Answer 1

这可能有点棘手，因为需要移动原点并且旋转不是相加的。

解决此问题的一种相当直接的方法是将元素包含在父元素中，其唯一目的是允许独立的 180 度旋转。

这个 sn-p 使用线性渐变为 player1 元素着色，因此可以看出发生了 180 度旋转。

.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>

Answer 2

嗯。你的代码错了，因为这条规则有冲突，最后一条规则优先；

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

你需要使用@keyframes

例如：

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

然后你需要使用animation: rotate;