我正在做一个项目,我们需要扭曲图像
基本上,我想拍摄这张图片:
并将其变成这样:
请注意 :文字也变形了。
老实说,我不知道如何去做,所以任何帮助将不胜感激!
这是我想要的演示
请在链接上上传上面的图片并查看输出。
好吧,这对文本来说并不容易,我将用它来节省时间css warp http://csswarp.eleqtriq.com/或者使用html5看看纯CSS可乐罐 http://www.romancortes.com/blog/pure-css-coke-can/
you can find the same DEMO http://jsfiddle.net/LTXXp/2 here note that you have to scroll left or right to see it in action
#coke
{
width: 510px;
height: 400px;
overflow: auto;
}
img
{
border: 0;
margin-left: -172px;
}
a
{
display: block;
padding-top: 19px;
width: 194px;
}
a:hover img
{
background-image: url('coke-title.png');
background-repeat: no-repeat;
background-position: 15px 100px;
}
div div
{
background-image: url('coke-scroll.png');
background-repeat: no-repeat;
background-position: 0 0;
padding-left: 300px;
width: 660px;
}
p
{
margin: 0;
padding: 0;
float: left;
height: 336px;
background-image: url('http://s21.postimg.org/fd9h4yy7r/coke_label.jpg');
background-attachment: fixed;
background-repeat: repeat-x;
width: 1px;
}
#x1 {background-position: 5px 30px;}
#x2 {background-position: 0px 30px;}
#x3 {background-position: -3px 30px;}
#x4 {background-position: -6px 30px;}
#x5 {background-position: -8px 30px;}
#x6 {background-position: -10px 30px;}
#x7 {background-position: -12px 30px;}
#x8 {background-position: -14px 30px;}
#x9 {background-position: -15px 30px;}
#x10 {background-position: -16px 30px;}
#x11 {background-position: -17px 30px;}
#x12 {background-position: -18px 30px;}
#x13 {background-position: -19px 30px;}
#x14 {background-position: -20px 30px;}
#x15 {background-position: -21px 30px;}
#x16 {background-position: -22px 30px; width: 2px;}
#x17 {background-position: -23px 30px;}
#x18 {background-position: -24px 30px; width: 2px;}
#x19 {background-position: -25px 30px; width: 2px;}
#x20 {background-position: -26px 30px; width: 2px;}
#x21 {background-position: -27px 30px; width: 2px;}
#x22 {background-position: -28px 30px; width: 3px;}
#x23 {background-position: -29px 30px; width: 3px;}
#x24 {background-position: -30px 30px; width: 4px;}
#x25 {background-position: -31px 30px; width: 5px;}
#x26 {background-position: -32px 30px; width: 7px;}
#x27 {background-position: -33px 30px; width: 12px;}
#x28 {background-position: -34px 30px; width: 55px;}
#x29 {background-position: -35px 30px; width: 11px;}
#x30 {background-position: -36px 30px; width: 6px;}
#x31 {background-position: -37px 30px; width: 5px;}
#x32 {background-position: -38px 30px; width: 4px;}
#x33 {background-position: -39px 30px; width: 3px;}
#x34 {background-position: -40px 30px; width: 2px;}
#x35 {background-position: -41px 30px; width: 3px;}
#x36 {background-position: -42px 30px; width: 2px;}
#x37 {background-position: -43px 30px; width: 2px;}
#x38 {background-position: -44px 30px;}
#x39 {background-position: -45px 30px; width: 2px;}
#x40 {background-position: -46px 30px;}
#x41 {background-position: -47px 30px;}
#x42 {background-position: -48px 30px;}
#x43 {background-position: -49px 30px;}
#x44 {background-position: -50px 30px;}
#x45 {background-position: -51px 30px;}
#x46 {background-position: -52px 30px;}
#x47 {background-position: -53px 30px;}
#x48 {background-position: -54px 30px;}
#x49 {background-position: -56px 30px;}
#x50 {background-position: -58px 30px;}
#x51 {background-position: -60px 30px;}
#x52 {background-position: -62px 30px;}
#x53 {background-position: -65px 30px;}
#x54 {background-position: -68px 30px;}
#x55 {background-position: -74px 30px;}
非常感谢比尔·克里斯韦尔对于他的评论I'd drink this:
DEMO http://jsfiddle.net/LTXXp/2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)