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

【问题标题】：Controlling rotation axis with webkit 3d transform使用 webkit 3d 变换控制旋转轴
【发布时间】：2011-08-02 06:58:55
【问题描述】：

我正在使用 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);
}

【问题讨论】：

标签： webkit css-transforms

【解决方案1】：

在你的包装上试试这个

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

尽管您可能需要也可能不需要明确设置其宽度。

【讨论】：