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

Question

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

就像here

除非我出于某种原因无法让它工作。

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

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