CSS3 вращается вокруг фиксированной точки

Question

Не могу понять, почему эта карусель вращается вокруг плавающей точки.

Интересно, может ли кто-нибудь пролить свет на это.

Внутри скрытой петли, которая должна позиционировать и поворачивать каждую отдельную панель, она должна вращаться вокруг источника трансформации центрального блока, который, по-видимому, не перемещается вбок.

Любые указатели были бы очень важны!

http://codepen.io/anon/pen/fjKtv

Answer 1

У вас есть элемент #carousel установлен в ширину 200px.

Тогда этот элемент имеет li, которые установлены на ширину 50%.

Если вы ничего не задали, это li выравнивается влево в # carousel. Это выравнивание слева делает полное вращение вне оси.

Вы можете это исправить настройки маржу авто, например

.cssanimations.csstransforms3d #carousel li { 
    -webkit-transition: 2s; 
    -moz-transition: 2s; 
    transition: 2s; 
    -webkit-backface-visibility: visible; 
    backface-visibility: visible; 
    width: 50%; 
    margin: auto; 
} 

(только последнее свойство добавляется)