Вопрос по анимации и позиционированию - Вопросы по CSS

Т.З. - Имеется страница. на которой три вертикальных блока во всю высоту страницы, два крайних блока расположены таким образом, что половина ширины скрыта за границами браузера, при наведении на левый блок - он должен выезжать полностью, а остальная часть страницы сдвигаться, так что средний блок окажется справа, а правый полностью уйдет за правую границу экрана. Реализовано следующим образом и прекрасно работает:

#left {
    left: -350px;
    width: 700px;

#center {
    left: 350px;
    width: 1220px;

#right {
    left: 1550px;
    width: 700px;

#left:hover + #center {
    left: 700px;
    transition: 1s;
}

#left:hover + #center + #right {
    left: 1920px;
    transition: 1s;
}

Но как сделать так, чтобы при наведении на правый блок, средний и левый отъезжали таким же образом в другую сторону, разобраться не могу. Подобный синтаксис подразумевает то, что при наведении на первый блок изменяются последующие, а как анимировать предыдущие блоки? Шаманил как только приходило в голову - не работает. Возможно ли с помощью CSS добиться такого результата? Если нет - то возникает другой вопрос, как его решить тоже не нашёл нигде:

Как нужно задать позиционирование блоков, чтобы при движении левого или правого, остальные блоки смещались вместе с ним?

P.S. Все свойства не несущие информацию по этой конкретной задаче я не копировал. Надеюсь на помощь.