html - 为什么此过渡属性不能与CSS一起使用？

我有少量的CSS的简单html文档。转换有效，但转换无效，我尝试了很多事情，它看起来像是我正在观看的教程的精确副本，我一直缺少的语法是否有问题，或者是否有其他原因导致其无法正常工作？

<!DOCTYPE html>
<html>
    <head>
        <title>transition Learning</title>
        <meta charset="utf-8">
        <style>
            #testItem{
                background-color: blue;
                width: 80px;
                height: 80px;
                margin: 300px auto;
                transition: transform 600ms ease-in-out;
                transform: translate(200px,200px) rotate(45deg);
            }


        </style>
    </head>
    <body>
        <div id="testItem"></div>
    </body>
</html>

最佳答案

因为您没有任何过渡吗？（点击框）

document.getElementById("testItem").onclick = function () {
  this.classList.toggle('transition');
}

#testItem.transition {
  transform: rotate(90deg);
}

#testItem{
                background-color: blue;
                width: 80px;
                height: 80px;
                margin: 300px auto;
                transition: transform 2s ease-in-out;
                transform: translate(0,0) rotate(45deg);
            }

<div id="testItem"></div>