HTML 5 倾斜代码答案

【问题标题】：HTML 5 Skew codeHTML 5 倾斜代码
【发布时间】：2012-07-17 04:53:21
【问题描述】：

我需要使用 Javascript 模拟倾斜图像的效果，例如 Photoshop。你们知道如何在 Javascript 中做到这一点吗？

什么样的几何计算应用于<canvas> 上下文？ 我不能为此使用 CSS，因为它必须动态修改。

【问题讨论】：

这可以单独使用 CSS3 完成。
这不能用 CSS 完成，因为它必须通过 javascript 动态修改。我在问题上这么说。还是谢谢。

【解决方案1】：

仅使用 CSS3 就可以做到这一点：

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

Live Example

注意，我只使用了 webkit，但对于所有其他现代浏览器都是一样的。

【讨论】：

这不能用 CSS 完成，因为它必须通过 javascript 动态修改。我在问题上这么说。还是谢谢。
@RubberDuck：你没有在问题中这么说，我认为仍然可以使用 JavaScript 和 CSS3 来完成。

【解决方案2】：

CSS transform: skew(); 无需 Javascript 即可为您完成这项工作。

演示： http://jsfiddle.net/ThinkingStiff/MtWBy/

输出

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>

【讨论】：

这不能用 CSS 完成，因为它必须通过 javascript 动态修改。我在问题上这么说。无论如何，谢谢。
@RubberDuck 你仍然可以使用.skew()，你可以在Javascript中设置类。

【解决方案3】：

我找到了解决方案：http://www.w3schools.com/html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0

【讨论】：