jQuery/CSS 翻转动画答案

【问题标题】：jQuery/CSS flip AnimationjQuery/CSS 翻转动画
【发布时间】：2014-12-12 18:45:53
【问题描述】：

我正在寻找一个 jquery 插件或一种使用 css 转换来制作以下动画的方法。

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

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

谢谢！

【问题讨论】：

这应该是某种圆形翻书吗？
基本上只有两张图片。前面的图像，后面的图像和显示第一和第二交替的翻转动画。

标签： jquery css-transforms

【解决方案1】：

这是我在项目中使用的 HTML 和 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>

【讨论】：

codepen.io/anon/pen/zxqwwN我无法在这里工作...你忘记了一些代码吗？
这是因为 .flippBox 具有百分比的宽度和高度，请尝试添加像素，例如 width:300px;height:300px 而不是我给它的 (height:50%;width:50%;) codepen.io/anon/pen/jEqmvb 并将鼠标移到该框上
谢谢，但这不是我要搜索的内容。请查看我在问题中附加的图片。