我试图扭曲我的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); }
解决方法
所有你需要做的是在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; }
说明:你正在向上旋转元素。但是,透视(通过变换原点处理,它是一个功能!)使得左手旋转不能在水平运动中进行平移。
看看如何控制最终的尺寸是多少