Question

我正在搜索jquery插件或使用css转换执行以下动画的方法。

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

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

谢谢！

Answer 1

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

jQuery / CSS翻转动画

1 个答案: