There are a couple of things happening here.
The transform functions also require a unit:
transform: rotateZ(180); -> transform:rotateZ(180deg);
The transition from height:auto; is not straightforwardly supported.
There are several workarounds available. You can refer to examples in this question.
Sidenote: Generally, using transitions on width/height is not recommended for performance reasons. It can trigger reflows/recalculations of the document structure, which can be costly.
You may observe that text inside divs gets compressed into multiple lines or shifts significantly.
A common approach is to use transform to resize/grow/unfold elements, similar to how you used it for rotation.
* {
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 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>