javascript - 如何使用javascript从 Sprite 表缩放/拉伸(stretch)/倾斜 Sprite ？

Question

一些背景:
我正在制作一个光线转换器，嗯......正在制作。但我决定稍微改变一下。我开始继续创建光线转换器并决定只显示一个图标并拉伸(stretch)/倾斜它而不是仅仅在一堆像素周围移动会容易得多。

我的问题是:
如何使用javascript从 Sprite 表缩放/拉伸(stretch)/倾斜 Sprite ？

我基本上想从 Sprite 图像中获取 16 像素 x 16 像素的图像，然后定位、缩放、旋转并使用 javascript 倾斜它。我该怎么做呢？

如果这有帮助，我正在考虑连接该图像的三个版本，以使其具有 3D block 在 3D 空间中移动的印象，而无需实际使用 3D。

Answer 1

最可能最简单的方法是使用 background-size css 属性。由于大多数现代浏览器(IE 9+、FF4+、Safari4+、Chrome3+)都支持它，您可以执行以下操作:

html:

<div id="mySprite">
</div>

css:

#mySprite{
    height: 80px; /* 64px * 1.25 */
    width: 80px;  /* 64px * 1.25 */
    background-image:url(my.png);
    background-position: -0px -560px; /* pick specific one at -448px * 1.25 */
    background-size:640px 640px; /* scale image to 512px * 1.25 */
}

spritesheet 上有大小为 64x64px 的 sprite，并将它们缩放到 80x80px。
在此处查看现场示例:http://jsfiddle.net/Zgr5w/1/

正如@Prusse 所说:您可以使用 transform: scale()但它也有一些缺点:浏览器支持、额外的位置转换、与其他元素的对齐可能会被破坏:

#mySprite{
    height: 64px;
    width: 64px;
    background-image:url(my.png);
    background-position: -0px -448px;
    transform:scale(1.25);
    /* additional to compensate the position shift */
    position:relative;
    top:10px;
    left:10px;
}

在此处查看上述两种方法的现场示例:http://jsfiddle.net/Zgr5w/1/