变换的元件，并将其对齐左，右外元件与

当我旋转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

有没有人应该是一个解决方案吗？

来源

2016-11-23 Peter Kälin

你有父组件'.skew-slider'上设置的设备宽度的100％，然后设置盛大子元素的宽度有宽2520px。它只是比容器大。 –

是的，但这应该是这样的，因为当你用鼠标悬停在滑块上时，内部div会移动。目标是，如果您移动到左侧，则内部div将对齐左侧窗口边界，如果您向右侧移动，则div的右侧边缘应与浏览器窗口的右侧对齐。 –

我想我已经找到另一种解决办法，这是工作近乎完美。我添加了一个脚本，它将transform-origin z-axis参数添加到窗口宽度的-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; 
}

它并不完美，但我还没有发现其他可行的解决方案，它的工作原理是从可用性的角度来看。

海尔的例子：http://websamurai.ch/stackoverflow/skew-slider.html

来源

2016-12-02 09:12:28

将position: absolute; left: 0;添加到类"skew-slider"的元素将完成这项工作。我用你提供的例子试过这种方法，它工作。

来源

2016-11-23 17:56:03

这不适合我。如果将光标移动到左侧，带有“inner-wrapper”类的元素仍然不在浏览器的左边界。如果你将光标移到右侧，这仍然是内部div的缺失。如果光标位于右侧，这也应该完全停留在浏览器的右侧。 –

您是否尝试过将此答案与CodeGust答案结合起来？ –

您是否尝试过使用transform-origin

例如：

transform-origin: left;

来源

2016-11-23 19:30:27 CodeGust

迄今为止看起来不错，变形起源：左侧;在左侧工作良好。你有没有想法，这对于右侧如何工作？ –

@PeterKälin 对于右侧应该以相同的方式工作，只需写“右”而不是“左”。以下是更多信息http://www.w3schools.com/cssref/css3_pr_transform-origin.asp – CodeGust

@PeterKälin 对于您的示例，您可以尝试添加x-margin或/并使用scale-transform进行旋转。另外，对于我'rotateY'就像'scaleX'一样工作，并且什么都不旋转。我使用'rotate（-6deg）'来旋转一个元素。如果在旋转任何东西之后，可以用'top：10px;'left：10px;'来修正它，例如。 – CodeGust

变换的元件，并将其对齐左，右外元件与

回答

相关问题