Question

使用CSS3透视图，我想制作一个翻转动画。这是我的代码：

HTML：

<header>
    <div id="h1">
        <h1>Title</h1>
    </div>
</header>

CSS：

header div#h1{
    width: 150px;
    perspective: 150px;
    -webkit-perspective:150px; 
}
header div#h1 h1{
    position: absolute;
    animation: flip 5s infinite;
}


@keyframes flip{
    0%{
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    25%{
        transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }
    50%{
        transform: rotateX(90deg);
        -webkit-transform: rotateX(120deg);
    }
    75%{
        transform: rotateX(120deg);
        -webkit-transform: rotateX(120deg);
    }
    100%{
        transform: rotateX(180);
        -webkit-transform: rotateX(180);
    }
}
/* -webkit- keyframes */

FIDDLE

看起来这个动画应该有效，但事实并非如此。

为什么这不起作用？

谢谢。

Answer 1

我添加了一些前缀。请检查这个小提琴。

Fiddle

<强> CSS

header div#h1 h1{
    position: absolute;
    -webkit-animation: flip 5s infinite; /* Safari 4+ */
    -moz-animation:    flip 5s infinite; /* Fx 5+ */
    -o-animation:      flip 5s infinite; /* Opera 12+ */
    animation:         flip 5s infinite; /* IE 10+ */
}

Answer 2

只是演示示例http://jsfiddle.net/6zF4X/2/

由于你的上一个值是180deg而不是360deg，所以它并没有完全翻转。我调整了其他一些度数，但你应该按你想要的方式调整度数。只需确保第一个为0，最后一个为360.此外，最佳做法是在整个动画中使用相同的值类型。所以我使用了rotateX（0）作为0％而不是像之前那样旋转（0）。

我在小提琴中改变了其他一些东西，所以不要完全使用那个小提琴。只需改变你的旋转度即可，它会起作用。

@keyframes flip{
    0%{
        transform: rotateX(0);
    }
    25%{
        transform: rotateX(80deg);
    }
    50%{
        transform: rotateX(160deg);
    }
    75%{
        transform: rotateX(280deg);
    }
    100%{
        transform: rotateX(360deg);
    }
}

CSS翻转动画无法正常工作

2 个答案:

Fiddle