css - 3D CSS 变换 - transform:rotateX(180deg);

Question

我正在尝试通过沿 x 轴上下翻转（180 度）来为悬停时的图像设置动画。

就像这里

除了由于某种原因我无法让它工作。

img {
    transition:all 2s ease-in-out;
    perspective: 800px;
    perspective-origin: 50% 100px;
}

img:hover {
    transform:rotateX(180deg);
}

Answer 1

根据this page，Chrome仍然需要-webkit前缀。

您缺少浏览器前缀。

img {
    -webkit-transition:all 2s ease-in-out;
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 100px;
}

img:hover {
    -webkit-transform:rotateX(180deg);
}

这也意味着您需要为各自的浏览器添加其他浏览器前缀。如果您不想乱用浏览器前缀，您可以使用 Lea Verou 的名为prefixfree.js的插件来为您处理这一切。