web-dev-qa-db-ja.com

画像の片隅をゆがめる

下の画像の緑色のチェックマークに示されているように、divの背景の1つのコーナーを傾斜させようとしています。

enter image description here

しかしCSS3ではそれを達成することができず、スキューは隅々まで完全にスキューします。右下隅を左に傾けて（たとえば25px）、遠近感を維持したいだけです（上の画像を参照）。

 background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);

フィドル： http://jsfiddle.net/3eX5j/

私のコードは：

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: skew(-45deg);
}
csstransformperspectiveskew
18
bartjansen

あなたがする必要があるのは3Dで考えることです：

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-Origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-Origin: left center;
}

フィドル

説明：上部で要素を手前に回転させています。ただし、パースペクティブ（変換原点を介して処理されます。これは関数です！）は、左手の回転を水平方向の動きに変換しないようにします。

最終的なサイズを制御する方法をご覧ください

複数のオプションをいじる

39
vals