在y轴上变换元素并将其左右对齐到外部元素

Question

当我将div元素旋转-6度时......

.skew-slider {
    max-width: 100%;
    overflow: hidden;
    float: left;
    perspective: 500px;
    margin: 0 auto 60px;
    display: block;
}
.skew-slider .inner-wrapper {
    width: 100%;
    float: left;
    display: block;
    -webkit-transform: rotateY( -6deg );
    -moz-transform: rotateY( -6deg );
    -o-transform: rotateY( -6deg );
    transform: rotateY( -6deg );
}

...元素旋转正确，透视也正确。好久不过。但是旋转元素的左右边界应该与外边框完全对齐，右边没有空格或者溢出。

以下是示例：http://websamurai.ch/stackoverflow/skew-slider.html

有人有解决方案吗？

Answer 1

将position: absolute; left: 0;添加到具有类"skew-slider"的元素中将完成这项工作。 我用你提供的例子尝试了这种方法并且它有效。

Answer 2

您是否尝试过使用transform-origin

例如：

transform-origin: left;