html - 如何在 CSS 中使盒子旋转和缩放？

Question

.box1{
  width:200px;
  height:200px;
  background-color: #FFF8DC;
  position:absolute;
  top:200px;
  left:20%;
  margin-left:-100px;
}

.box1.hover {
  -webkit-animation: moving-image 2s 1;
}

@-webkit-keyframes moving-image {
    from { -webkit-transform: rotate(0deg) scale(1);
    }
    to { -webkit-transform: rotate(360deg) scale(1.3);}
}

<div class='box1'></div>

当您将鼠标悬停在一个框上时，我希望它增加大小并旋转一次 360 度。当您从框中移除光标时，我希望它恢复到原来的形状。我把我的代码放在下面，我不知道它有什么问题。

.box1{
  width:200px;
  height:200px;
  background-color: #FFF8DC;
  position:absolute;
  top:200px;
  left:20%;
  margin-left:-100px;
}




@-webkit-keyframes moving-image {
    from { -webkit-transform: rotate(0deg) scale(1);
    }
    to { -webkit-transform: rotate(360deg) scale(1.3);}
}

.box1.hover {
  -webkit-animation: moving-image 2s 1;
}

Answer 1

我想我有你要找的东西: 不需要 webkit 关键帧和所有这些东西。我所做的只是添加一个 :hover 效果和一个 css transition(产生旋转效果)

.box1{
  width:200px;
  height:200px;
  background-color: red;
  position:absolute;
  top:200px;
  left:20%;
  margin-left:-100px;
  transition: all ease 1s;
}

.box1:hover{
  transform: rotate(360deg) scale(1.3);
}

<div class="box1"></div>

编辑:

如果您更改

，您的版本也可以正常工作

.box1.hover {
  -webkit-animation: moving-image 2s 1;
}

到

.box1:hover {
  -webkit-animation: moving-image 2s 1;
}