所以,简单的问题:
我有一个元素,它的动态处于正常状态 - 变换动画(perspective
,rotateX
和rotateZ
- 但只有rotateZ
个变化)不断奔跑。在:hover
我要更改该动画(删除rotateX
和perspective
转换,但保留rotateZ
动画) - 这没问题,但我想要动画过渡到新动画,我不知道如何实现这一目标。
从:
@-webkit-keyframes rotatespace {
0% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
到:
@-webkit-keyframes rotateflat {
0% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
答案 0 :(得分:3)
您可以使用动态块的:before
伪元素和" 3D"效果(rotateX
)。
示例:
.block {
position: absolute;
top:100px;
left:100px;
width: 100px;
height:100px;
transform-origin: center center 0px;
overflow:visible;
transform:perspective(555px) rotateX(55deg) scale(1.25);
transition:transform .5s;
}
.block:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: blue;
animation-name: rotatespace;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
.block:hover {
transform:perspective(555px) rotateX(0deg) scale(1.25);
}
@keyframes rotatespace {
0% {
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(360deg);
}
}

<div class="block"></div>
&#13;