I can't transition any property EXCEPT the width

I'm trying to figure out how transforming, animating, and transitioning work, and I've followed atleast 1 or 2 crash courses and I have followed 5 solutions in problems related to this, and still nothing worked.

#tr-w {
  transition: width 1s ease-in-out;
}

#tr-w:hover {
  width: 50%;
}

#tr-h {
  transition: height 2s ease-in-out;
}

#tr-h:hover {
  height: 40vh;
}

#tr-r {
  transition: width 1s ease-in-out, transform 2s ease-in-out;
}

#tr-r:hover {
  transform: rotateZ(180);
  width: 30vh;
}

JSFiddle: https://jsfiddle.net/q976oc0h/1/
CodeSandbox: https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
CodePen: https://codepen.io/ssssss12518/pen/rNMMZoL

It doesn't work on any code editor I know, even IDEs like Atom. (my main text editor)

Solution

There's a couple of things going on.

The transform functions als take a unit: transform: rotateZ(180); -> transform:rotateZ(180deg);

The transition from height:auto; isn't intuitively supported.
There's a couple of work arounds. You could find exmaples on this question

Sidenote: Generally, transitioning on width/height is bad practice for performance. It will trigger a reflow/recalculate of the document structure. which is costly. You would also notice that the text inside the divs gets squished into multiple lines or moves around a lot.
general approach is to use transform to shrink/grow/fold-out the elements. like you did for rotate.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arial", sans-serif;
}

.container {
  padding: 10px;
  margin-left: 20px;
}

.container > *[class*="bg"] {
  margin-left: 10px;
}

.bg-gray {
  margin: 10px 0px;
  background-color: #cbd5e0;
  border: 3px solid black;
  padding: 20px;
  margin-bottom: 20px;
  width: 30%;
}

#tr-w {
  transition: width 1s ease-in-out;
}

#tr-w:hover {
  width: 50%;
}

#tr-h {
  transition: height 1s ease-in-out;
  height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}

#tr-h:hover {
  height: 40vh;
}

#tr-r {
  transition: transform 1s ease-in-out;
}

#tr-r:hover {
  transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Transition Animation CC</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">

      <div class="bg-gray" id="tr-w">
        <p>
          Hover over me
        </p>
      </div>
      <div class="bg-gray" id="tr-h">
        <p>
          Hover over me
        </p>
      </div>

      <div class="bg-gray" style="height: 30vh;" id="tr-r">
        <p>
            Hover over me
        </p>
      </div>
    </div>
    <script src="main.js" charset="utf-8"></script>
  </body>
</html>