Question

＆＃13;

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

＆＃13;

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

＆＃13;

当您将鼠标悬停在一个方框上时，我希望它增加其大小并将其旋转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过渡（这会产生旋转效果）

＆＃13;

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

＆＃13;

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

＆＃13;

修改

如果您更改
，您的版本也会正常运行
.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指令。

如何使CSS在CSS中旋转和缩放？

2 个答案: