How to warp image [closed]

Question

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.

Aeneas

What have you already tried? No-one will write it for you... – Boracite

@Boracite : OP says I honestly have no clue ...that gives a clue ;) – Concealment

Then it's off-topic for Stack Overflow ;) – Boracite

A google search with 'css wrapping' will help you get 'clues' – Displume

@Boracite : ohh come on....helping an honest person is not off topic...seriously even i don't know what keyword to type in Google for this..... just tell him the keywords , that would be a start for him!! :) – Concealment

Wait... You want to turn it into an image you've already made? Can't you just use that image? – Subcortex

@BeatAlex : gud point...but what if images are coming dynamically on page....user uploaded kind of snaps??? – Concealment

Ahh gotcha! And he wants to assign them a class to get them all like that? – Subcortex

@BeatAlex : and hence u solved the big bang theory!! :D – Concealment

i have turn it using photoshop i want trun it run time. – Aeneas

My mother will be so proud. – Subcortex

@BeatAlex : try NASA rather than SO.. :p – Concealment

@Aeneas : mate did u got anything googling?? – Concealment

nothing much trying kinetic js – Aeneas

codeslashslashcomment.com/2012/12/12/… – Stormystorting

CSS3 perspective properties and CSS3 skew – Average

Your question has been closed, but here is a Fiddle showing how to cut your image into 1-pixel-wide slices and then warp that image by vertically offsetting those vertical slices: jsfiddle.net/m1erickson/6etMC – Weekly

Answer 1

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

Basic

I'd drink this: jsfiddle.net/LTXXp/2 – Glomerulonephritis

ok i add it to the post – Basic

+1 to you for attracting @BillCriswell's cool Fiddle. – Weekly

I only replaced one line of code from what kougiland posted haha. I think it's a cool effect, not exactly what OP was going for though, sadly. – Glomerulonephritis

but that line was the correct image, and since i was using a different image i think it is fair to add your image as it is on the current demo. – Basic

i just realised, coke won't work on chrome on MAC!! – Concealment