jQuery/CSS翻转动画

Question

我正在寻找一个jquery插件或一种方式来做下面的css转换动画。

http://i.imgur.com/un61OPK.png

我已经用谷歌搜索过了，但我所能找到的就是这个标准的翻转动画。但我希望翻转动画从中间开始，如上图所示。

谢谢!

Answer 1

这是我的超文本标记语言和CSS代码，我已经在我的项目中使用，它在包括IE10+在内的所有浏览器中都支持

<style>
.flippBox {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position:relative;
    display:inline-block;
    z-index: 101;
    height:50%;
    width:50%;
}
.flippBox > div {
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    position: absolute;
    left:0;
    top:0;
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    width:100%;
    height:100%;
    color:white;
    text-align:center;
}
.flippBox .front{
    z-index: 101;
    -moz-transform:perspective(800px) rotateY(0deg);
    -webkit-transform:perspective(800px) rotateY(0deg);
    transform:perspective(800px) rotateY(0deg);
    background:red;
}
.flippBox .back{
    -moz-transform:perspective(800px) rotateY(-180deg);
    -webkit-transform:perspective(800px) rotateY(-180deg);
    transform:perspective(800px) rotateY(-180deg);
    background:#049045;
}
.flippBox:hover .front {
    -webkit-transform:perspective(800px) rotateY(180deg);
    -moz-transform:perspective(800px) rotateY(180deg);
    transform:perspective(800px) rotateY(180deg);
}
.flippBox:hover .back{
    -moz-transform:perspective(800px) rotateY(0);
    -webkit-transform:perspective(800px) rotateY(0);
    transform:perspective(800px) rotateY(0deg);
}
</style>

<div class="flippBox"><div class="front">text</div><div class="back">text</div></div>