Question

当我悬停在它上面时，我想旋转我的div，因为它旋转我想让它变大，就像放大一样。

到目前为止，我有这个：

[HTML]

    div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>

[CSS]

.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}

.myMsg:hover {
    opacity: 1;
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
    -webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}

所以我希望它在缩放到常规尺寸之前旋转

感谢任何帮助

Answer 1

First, to show that it can be done

现在已经开始了，让我们深入了解细节并告诉你如何去做。

首先，您需要使用animation为属性设置动画并获得旋转效果。可悲的是，转换是不够的，因为在0到360之间转换意味着你不会去任何地方。因此，在悬停时将属性从一个动画设置为另一个。您的代码最终会看起来像这样：

@keyframes spin {
    from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
    to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
    animation: spin 1s forwards;
}

@keyframes定义将要发生的动画，并且您希望从一组属性转换为最后一个属性。然后，设置:hover以播放该动画。动画的相关属性是animation-name，animation-duration和animation-fill-mode（表示它应该具有与完成动画时的最后一帧相同的属性.Webkit需要前缀，所以你也想把它们放进去。

除此之外，我还在transition: transform 1s;类上放置了一个.myMsg，以便在鼠标移开后它会动画回来。但请注意，Webkit似乎并不能很好地兼顾两者之间的相互作用，因此它有点不连贯且不太理想。但是，有了这样的实验属性，有时你会得到你得到的东西。

一些旁注：

你的CSS不兼容浏览器，你应该清理一下
您正在定义1个转换属性，然后立即覆盖它。所有变换都需要在同一个声明中。它们不能像那样组合

Answer 2

定义infinite css animation with keyframes for spinning并在悬停时切换到它。对大小（高度/宽度）属性使用过渡，并在css中悬停时更改它们。

示例：http://jsfiddle.net/6guCd/

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease;
}
div:hover {
    margin: 50px;
    width: 200px;
    height: 200px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

如何在旋转时使div更大（CSS3动画）

2 个答案: