變換的元件，並將其對齊左，右外元件與

當我旋轉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

變換的元件，並將其對齊左，右外元件與

回答

相關問題