problematic rotate() function ~ transform rotate and translate not working for single element

Question

I am trying to rotate the button 180 degrees. I found out that when the 'rotate()' function is called before the 'translate()' one, the rotation doesn't work.

My question is: Why it works like that?

1st code(not working):

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

2nd code(working):

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

Are you sure that your second example is fully working? What happened to the translations? You can put several transforms into one transform: setting but you can't have one transform property following another as the first will be overwritten by the second. — A Haworth, Mar 31 '22 at 15:39
@AHaworth Second example is not working because he mentioned `transform` on two separate lines. I addressed the second part of your comment in my answer, thanks. — Kameron, Mar 31 '22 at 15:52

Kameron · Answer 1 · 2022-03-31T16:36:43.513

Because you cannot specify two transform's on one element. The second set of CSS is working because the rotate is positioned last in the DOM order. Therefore it is overriding the translate. You'll notice if you add !important; to your first set of CSS (the one not working), it will work just fine as demonstrated in the snippet.

You can achieve rotate and translate on a single element you can write it like so:

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>

score 1 · Answer 2 · answered Mar 31 '22 at 13:47

The second transform property overrides first one

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

transform: translate(50%, -50%); applies

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

transform: rotate(180deg); applies

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>

problematic rotate() function ~ transform rotate and translate not working for single element

2 Answers2