半像素的图像插值在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 */
}