如何在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过渡（使旋转效果）

 .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;
}

Answer 2

两者都可以通过转换完成，如下所示：

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

但是为了安全起见，您应该使用较旧的浏览器：

.myClass { 
            -moz-transform: scale(1.3) rotate(360deg);
            -webkit-transform: scale(1.3) rotate(360deg);
            -o-transform: scale(1.3) rotate(360deg);
            -ms-transform: scale(1.3) rotate(360deg);
            transform: scale(1.3) rotate(360deg);
    }

最后一行应该是标准的css3指令。