3D CSS Transform - transform：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);
}

这也意味着您需要为其各自的浏览器添加其他浏览器前缀。如果您不想使用浏览器前缀，可以使用Lea Verou的一个名为prefixfree.js的插件为您完成所有操作。