我正在尝试通过沿 x 轴上下翻转(180 度)来为悬停时的图像设置动画。
就像here
除非我出于某种原因无法让它工作。
img {
transition:all 2s ease-in-out;
perspective: 800px;
perspective-origin: 50% 100px;
}
img:hover {
transform:rotateX(180deg);
}
最佳答案
根据 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 为您处理这一切。
关于css - 3D CSS 变换 - 变换 :rotateX(180deg);,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12629194/