我想让我的元素在旋转按钮的同时改变它的大小

Question

我希望我的元素在旋转按钮时更改其大小。我不知道为什么不起作用，但它在悬停上正常工作。下面是相同的代码。我的HTML:

<div  class="rec">Rec</div>
<button id="button" >Spin me</button>

我的CSS:

html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.rec {
width:200px;
height:100px;
padding:10px;
color:#fff;
background-color: red;
margin-left:200px;
transition: transform 1s ;

}
.play{

transform: scale(2) rotate(360deg);
}
.rec:hover {
transform: scale(2) rotate(360deg);
transition-timing-function: ease-in-out;
}

我的JS：

var button = document.getElementById("button");
var rect = document.querySelector(".rec");
var play = document.querySelector('.play');
function spin(){
rect.classList.toggle('play');
}
button.onclick = spin;

Answer 1

适用于我。这是您未经编辑的示例。

也许是其他什么东西在爆炸，阻止了你的onclick设置？忘记保存？加载错误的文件？

var button = document.getElementById("button");
var rect = document.querySelector(".rec");
var play = document.querySelector('.play');
function spin() {
rect.classList.toggle('play');
}
button.onclick = spin;

.rec {
width: 200px;
height: 100px;
padding: 10px;
color: #fff;
background-color: red;
margin-left: 200px;
transition: transform 1s;
}
.play {
transform: scale(2) rotate(360deg);
}
.rec:hover {
transform: scale(2) rotate(360deg);
transition-timing-function: ease-in-out;
}

<div class="rec">Rec</div>
<button id="button">Spin me</button>