Перемещение изображений трансформацией

by SerGen

HTML

<i a></i>
<i b></i>
<i c></i>

CSS

i:before {
    display: block;
    margin-top: 2em;
    -webkit-transform: translateY(-1.5em);
    transform: translateY(-1.5em); 
}
i {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEUAAAD///+l2Z/dAAAADElEQVQI12NoYGAAAAGEAIEo3XrXAAAAAElFTkSuQmCC);
    display: block;
    height: 200px;
    transition: 10s;
}
i + i {
    margin-top: 2em;
}

[a]:before {
    content: 'no rotate';
}
[a]:hover {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
}

[b]:before {
    content: 'rotate(0.0001deg)';
}
[b] {
    -webkit-transform: rotate(0.0001deg);
    transform: rotate(0.0001deg);
}
[b]:hover {
    -webkit-transform: translateX(100px) rotate(0.0001deg);
    transform: translateX(100px) rotate(0.0001deg);
}

[c]:before {
    content: 'rotate(0.02deg)';
}
[c] {
    -webkit-transform: rotate(0.02deg);
    transform: rotate(0.02deg);
}
[c]:hover {
    -webkit-transform: translateX(100px) rotate(0.02deg);
    transform: translateX(100px) rotate(0.02deg);
}

JavaScript

/*
Небольшое вращение помогает перемещать изображение трансформацией со сглаживанием в ФФ (https://bugzilla.mozilla.org/show_bug.cgi?id=739176).

В Хромах заметно искажение изображений, оно проявляется только в статичном состоянии, когда их отображение реализуется программно, не аппаратно, как в ситуациях с переходами и анимациями.
*/