我正在使用 webkit 转换创建卡片翻转效果。我让它在一个部分中按我喜欢的方式工作,在那里我有一个围绕其中心轴旋转的 DIV,呈现出一张正在翻转的卡片的外观。
我现在想将同样的效果添加到页面转换中。我使用相同的 CSS 和 HTML 结构,但在这种情况下,我没有得到围绕中心轴旋转的效果。
相反,它看起来像是沿着锚定在对象左侧而不是中心的 y 轴旋转(所以它看起来像一个门打开,而不是一张卡片翻转)。
我一直在阅读规范,但无法弄清楚哪个属性控制旋转轴的位置。我需要添加或更改什么才能使翻转工作?
html结构:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
和 css(.flip 正在通过 jQuery 添加以启动效果)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}