私はdiv要素-6そのよう度回転すると、それは

Question

と左と外側要素の右側のy軸上の要素を変換し、整列...

.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

私はほぼ完璧な作業している別の解決策を見つけたと思います。私は変換元のz軸パラメータをウインドウの幅の-1/3に加えたスクリプトを追加しました。（ウインドウのサイズを変更しても）左右の外枠がほぼ同じになりました。

主要部分は、これらのスクリプトには、次のとおりです。

CSSで

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

及びこれら：

.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

Answer 2

"skew-slider"の要素にposition: absolute; left: 0;を追加すると、そのジョブが実行されます。 私が提供した例でこのアプローチを試してみました。

Answer 3

はあなたが例えばtransform-origin

を使用しようとしました：

transform-origin: left;