变换 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/Whosebug/skew-slider.html

有人对此有解决方案吗？

Answer 1

向带有 class "skew-slider" 的元素添加 position: absolute; left: 0; 即可。我用您提供的示例尝试了这种方法并且有效。

Answer 2

您是否尝试过使用transform-origin

例如：

transform-origin: left;

Answer 3

我想我已经找到了另一个解决方案，它几乎可以完美运行。我添加了一个脚本，它将 transform-origin z 轴参数添加到 window 宽度的 -1/3（即使在调整 window 大小时），并且现在左右外边界几乎完全一样。

脚本中的主要部分是这些：

$(window).resize(function() {
    $('.skew-slider .inner-wrapper').css('transform-origin', 'center center -' + $(window).width()/3 + 'px');
});

以及 css 中的这些：

.skew-slider {
    max-width: 100%;
    overflow-y: visible;
    overflow-x: hidden;
    perspective: 500px;
    margin: 0 auto 60px;
    display: block;
    position: absolute;
    left: 0;
}
.skew-slider .inner-wrapper {
    width: 100%;
    float: left;
    display: block;
    left: 0;
    right: 0;
    -ms-transform: rotateY( -6deg ) scale(0.8);
    -webkit-transform: rotateY( -6deg ) scale(0.8);
    -moz-transform: rotateY( -6deg ) scale(0.8);
    -o-transform: rotateY( -6deg ) scale(0.8);
    transform: rotateY( -6deg ) scale(0.8);
}
.skew-slider ul {
    width: 2520px;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

它并不完美，但我还没有找到另一个可行的解决方案，从可用性的角度来看，它是这样工作的。

举个例子：http://websamurai.ch/Whosebug/skew-slider.html

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

Transform an element on y-axis and align it left and right to outer element with

html

css

jquery

css-transforms