3D CSS变换-变换：rotateX（180度）；

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

就像

除了我因为某种原因不能让它工作

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

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

据报道，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的插件来帮你处理所有的事情。

根据，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的插件来帮你解决所有问题。

@JezenThomas current-chrome-stable。演示都在引用的页面上运行。@JezenThomas当前chrome稳定。演示都在参考页面上进行。