I need to simulate the effect of skewing an image, like Photoshop, using Javascript. Do you guys know how to do that in Javascript?

What kind of geometry calculation is applied to the <canvas> context? I can't use CSS for this, because it has to be modified dynamically.

I need to simulate the effect of skewing an image, like Photoshop, using Javascript. Do you guys know how to do that in Javascript?

What kind of geometry calculation is applied to the <canvas> context? I can't use CSS for this, because it has to be modified dynamically.

• javascript
• html

• This can be done with CSS3 alone. – Madara's Ghost Commented Jul 16, 2012 at 19:24
• this cannot be done with CSS because it has to be modified on the fly by javascript. I said that on the question. Thanks anyway. – Duck Commented Jul 16, 2012 at 20:43

3 Answers 3

This is possible with CSS3 alone:

img {
  -webkit-transform: skew(45deg);
}

Live Example

Note, I only used webkit, but it's the same for all other modern browsers.

CSS transform: skew(); will do this for you with no Javascript.

Demo: http://jsfiddle/ThinkingStiff/MtWBy/

Output

CSS

#original {
    margin: 55px 10px 0 10px;
}

#vertical {
    margin: 30px 20px 0 0;
    transform:             skew( 0, -30deg );
        -ms-transform:     skew( 0, -30deg );
        -moz-transform:    skew( 0, -30deg );
        -o-transform:      skew( 0, -30deg );
        -webkit-transform: skew( 0, -30deg );
}

#horizontal {
    margin: 55px 0 0 0;
    transform:             skew( -30deg, 0 );
        -ms-transform:     skew( -30deg, 0 );
        -moz-transform:    skew( -30deg, 0 );
        -o-transform:      skew( -30deg, 0 );
        -webkit-transform: skew( -30deg, 0 );
}

.image {
    background-image: url( 'http://placekitten./100' );  
    border: 1px solid black;
    display: inline-block;
    height: 100px;
    margin-right: 20px; 
    vertical-align: top;
    width: 100px;  
}

HTML

<div id="original" class="image"></div>
<div id="vertical" class="image"></div>
<div id="horizontal" class="image"></div>

I found the solution: http://www.w3schools./html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0