使用webkit 3d变换控制旋转轴

时间:2011-07-01 14:23:24

标签: webkit css-transforms

我正在使用webkit转换创建卡片翻转效果。我在一个部分中按照我喜欢的方式工作,在那里我有一个围绕其中心轴旋转的DIV,给出了翻转卡片的外观。

我现在想要将相同的效果添加到页面转换中。我使用相同的CSS和HTML结构,但在这种情况下,我没有获得围绕中心轴旋转的效果。

相反,看起来转换沿y轴旋转固定在对象的左侧而不是中心(因此它看起来像一个门打开,而不是卡片翻转)。

我一直在阅读规范,但无法确定哪个属性控制旋转轴的位置。我需要添加或更改以使翻盖工作?

html结构:

<div id="frontbackwrapper">
    <div id="front"></div>
    <div id="back"></div>
</div>

和css(通过jQuery添加.flip以启动效果)

#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);
}

1 个答案:

答案 0 :(得分:1)

在你的包装上试试

-webkit-transform-origin: 50% 0 0;

虽然您可能必须或可能不必明确设置其宽度。