Geek asks and answers

HTML 5 Slant Code

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

What geometric calculation is applied to the context <canvas>? I cannot use CSS for this because it needs to be changed dynamically.

enter image description here

+5
source share
3 answers

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

Demo: http://jsfiddle.net/ThinkingStiff/MtWBy/

Output

kitties

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.com/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>
+2
source

CSS3:

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

, webkit, .

+2

More articles:


All Articles