歪斜图像的一个角 [英] Skew one corner of image

问题描述

我试图偏移div背景的一个角落，如下图中的绿色选中标记所示：

I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:

在CSS3中，我无法实现，歪斜每个角落。我只是想将左下角（例如25像素）倾斜，并保持透视（如上图所示）。

In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).

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

推荐答案

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

小提琴

说明：您正在向上旋转元素。但是，透视（处理转换起源，它是一个函数！）使左手旋转不能在水平运动中翻译。

explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.

看看如何控制什么是最终尺寸

See how can be controlled what is the final size

多种选择

这篇关于歪斜图像的一个角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！