歪斜图像的一角

Question

我正试图扭曲div背景的一个角落，如下图中的绿色复选标记所示：

在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);
}

Answer 1

您需要做的就是在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;
}

fiddle

解释：您正在向上部分向您旋转元素。但是，透视（通过变换原点处理，它是一个函数！）使得左手旋转不会在水平移动中平移。

了解如何控制最终尺寸

fiddle with multiple options