-1

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)
Ankesh kumar Singh
  • 9

2 Answers2

0

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!

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • I have installed the CSS Plugin and currently using non minified version of TweenJS but still, there seems no change in it. And one more thing, there is changing in style properties of that image. – Ankesh kumar Singh Jun 26 '19 at 16:35
0

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!

Lanny
  • 11,244
  • 1
  • 22
  • 30