CSS3 绕固定点旋转

Question

我不明白为什么这个轮播围绕一个浮点旋转。

我想知道是否有人可以阐明这一点。

那里隐藏着一个 sass 循环，它应该定位和旋转每个单独的 Pane ，这应该围绕中央框的变换原点旋转，它似乎不会向侧面移动。

非常感谢任何指点!

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

Answer 1

您将#carousel 元素的宽度设置为 200 像素。

然后此元素的 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;
}

(仅添加最后一个属性)