javascript - 在 CSS 中按半像素移动的图像插值

Question

我在我的网站上使用了某种视差效果。展示的产品是奢侈品，因此展示必须完美像素...

目前，当产品以 1 像素的步长“跳跃”时，有点跳动......第一层根据光标的位置移动大约 6 个像素。在我的 CSS我在 JavaScript 计算后得到了这些结果:

margin-left: -4.5926544240400666px;

是否有可能像在 Flash 时代一样，让浏览器插入这个位置而不是四舍五入到最近的像素？所以我实际上有多少步，就有多少鼠标位置，而不是六个艰难的步骤..

Answer 1

您可以使用变换以子像素为单位移动它。这不是最好的例子，但它给了你一个想法:

div {
    transform: translate(5.5px, 10.5px);
    -ms-transform: translate(50.5x, 10.5px); /* Internet Explorer 9 */
    -webkit-transform: translate(5.5px, 10.5px); /* Safari and Chrome */
}