如何扭曲图像 [英] How to warp image

问题描述

我正在开发一个我们需要扭曲图片的项目

基本上，我想采取这个图片：

>

请注意：文字也扭曲。

我真的没有线索如何去，所以任何帮助将非常感谢！

这里是演示我想要什么 IMAGELINK

请上传链接上的图片并查看输出。

解决方案

这不容易的文本，我会用这个来节省时间 css warp
或使用html5查看纯CSS可乐

您可以找到相同的 DEMO 请注意，您必须向左或向右滚动才能看到它。

  #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：非常感谢 Bill Criswell     strong>为他的评论我会喝这：  DEMO < a> 
 
I am working a project where we need to warp image

Basically, I want to take this image: 



And turn it into this:



Please note : text also warped. 

I honestly have no clue how to go about it so any help would be greatly appreciated! 

Here is demo what exactly i want IMAGELINK

please upload above image on link and see the output.
解决方案
well that s not easy for the text i will use this to save time css warp
or use html5 have a look at Pure CSS Coke Can

you can find  the same DEMO  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;}
many thanks to  Bill Criswell for his comment I'd drink this: DEMO 

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