通过-webkit-transform进行图像缩放

时间:2014-02-11 08:51:53

标签: css animation

我体内有一个img。

$(function() {
    var body = $("body"),
    scaled;
    $("img").click(function() {
        if(scaled) {
            body.css("-webkit-transform", "scale3d(1, 1, 1)");     
        } else {
            body.css("-webkit-transition", "-webkit-transform 0.2s ease");     
            body.css("-webkit-transform", "scale3d(8, 8, 1)");     
        }
        scaled = !scaled;
    });
});

我点击了图片。

缩放到8倍是平滑的。 首次从8x到1x的规模都不好( 从8x到1x的第二个刻度是平滑的。

点击图片...

小提琴:example

我只能使用-webkit-transform,

我怎么可能是缓存动画...

怎么办?

在IE11中 - 一切正常。 我无法在Chrome中解决问题。

1 个答案:

答案 0 :(得分:0)

这就是你要找的东西:

* {
    -webkit-transform: translate3d(0,0,0);
}

<强> The fiddle