有问题的旋转（）函数〜转换旋转和翻译不适用于单个元素

Question

我正在尝试将按钮旋转 180 度。我发现，当在“translate()”函数之前调用“rotate()”函数时，旋转不起作用。

我的问题是：为什么会这样？

第一个代码（不工作）：

   .btn--right {
    right: 0;
    top: 50%;
    transform: rotate(180deg);
    transform: translate(50%, -50%);
  }

第二个代码（工作）：

   .btn--right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    transform: rotate(180deg);
  }

Answer 1

因为您无法在一个元素上指定两个 transform。第二组 CSS 正在工作，因为 rotate 位于 DOM 顺序的最后。因此它会覆盖 translate。您会注意到，如果将 !important; 添加到您的第一组 CSS（不起作用的那组），它将正常工作，如代码片段中所示。

您可以在单个元素上实现 rotate 和 translate，您可以像这样编写：

transform: rotate(180deg) translate(50%, -50%);

.btn--right {
  right: 0;
  top: 50%;
  transform: rotate(180deg)!important;
  transform: translate(50%, -50%);
}

<button class="btn--right">Send</button>

Answer 2

第二个变换属性覆盖第一个

transform: rotate(180deg);
transform: translate(50%, -50%);

变换：转换（50％，-50％）;适用

transform: translate(50%, -50%);
transform: rotate(180deg);

transform：rotate：rotate（180deg）;适用

body {
  height: 100vh;
  background-color: bisque;
  display: grid;
  place-items: center;
}

.btn--right{
  display: grid;
  place-items: center;
  background-color: red;
  height: 100px;
  width: 100px;
  

  right: 0;
  top: 50%;

  
  transform: rotate(180deg);
  transform: translate(50%, -50%);


  /* transform: translate(50%, -50%);
  transform: rotate(180deg); */
}

.btn--right p {
  color:white;
}

<div class="btn--right">
      <p>Hello</p>
</div>