Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    can canvas transform image like this?

    i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas?

    ( left side is the source)

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Probably with CSS3

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jonjo View Post
    Probably with CSS3
    can u give me an example? thx

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jonjo View Post
    i know what the css3 can do , seems it can not carry out the effect i want

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Please refer to http://www.codingforums.com/showthread.php?t=231825 for answers to a similar request

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Please refer to http://www.codingforums.com/showthread.php?t=231825 for answers to a similar request
    i do not think it's a solution or i do not understand it.
    the css3 and canvas can transform an image from single direction just like the examples , but what i want is not ( see the picture above )
    can u give me some codes about it?
    thx.

  • #8
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by henry42 View Post
    i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas?
    CSS3 transformations use affine transformation matrices (see also). They support rotation, scaling, shearing and translation. This means all lines must stay parallel.

    Your example shows 3D projection, which unfortunately is not supported in CSS3. However there are hacks to create the illusion of perspective.

  • Users who have thanked Benjammin for this post:

    henry42 (08-03-2011)

  • #9
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    seems there is no solution >_<

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,701
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Henry, note post #8 which was set to a “moderated” state and wasn’t visible for that reason (I’ve approved the post to make it public).

  • Users who have thanked VIPStephan for this post:

    henry42 (08-03-2011)

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,374
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by henry42 View Post
    the css3 and canvas can transform an image from single direction just like the examples , but what i want is not ( see the picture above )
    that's not true; you can stack up transformations. you can use the matrix to do a lot of things at once, if you know how all that works...


    https://developer.mozilla.org/en/CSS/-moz-transform


    you can of course use canvas transforms: https://developer.mozilla.org/en/Can...ons#Transforms
    Last edited by rnd me; 08-02-2011 at 06:00 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank u all , i think the #8 is what i want !
    although css3 is powerful , it does not support 3d right now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •