jquery - 变换 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

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

脚本中的主要部分是:

$(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;
}

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

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