applying css properties in image using CSS Plugin in Createjs

Question

trying to change the css properties of an image using CSS Plugin in Createjs but i am not able to do so. Guys plz help

    var wheel = new createjs.Bitmap(preload_queue.getResult("bg"));
    stage.addChild(wheel);
    wheel.set({x:0 ,y:0})

    wheel.image.style.transform = "translate(20px, 30px)";
    wheel.image.style.perspective= "2000px";
    wheel.image.style.perspectiveOrigin = "left";
    createjs.Tween.get(wheel)
        .to({transform: "translate(500px, 50px)"}, 1000)

Answer 1

Have you "installed" the CSSPlugin?

createjs.CSSPlugin.install();

TweenJS natively just works with numerical values, but the transform is a string that is composed of various functions (translate, scale, etc). The CSSPlugin was updated in version 0.8.2 to deal with transforms.

CSSPlugin Documentation

Note that CSSPlugin is not included in the minified version of TweenJS, so you have to download it and add it to your project if you want to use it.

I hope that helps!

Answer 2

For this particular demo, the issue is that you are using the canvas to display your image.

EaselJS does not support CSS, especially perspective transforming. You can do typical x/y/rotation/skew/scale transforms using direct properties, or the setTransform() method, but that is all 2D-canvas supports.

The CSSPlugin for TweenJS is to affect the CSS transformations of DOM elements, and is not intended for use with EaselJS objects.

Hope that helps!