从两个原点旋转两次

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

嗯。你的代码是错误的，因为这个规则有冲突，最后一个规则有更高的优先级；

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;

Answer 2

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

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

此代码段用 linear-gradient 为 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>

从两个原点旋转两次

Rotate twice from two origin

html

css

rotation

transform

CSS

HTML