Example: Using Transforms

HTML

<div id="mygraphiccontainer"></div>
<div>
    <button type="button" id="rotate">Rotate</button><br/>
    <button type="button" id="translate">Translate</button><br/>
</div>

CSS

#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:200px;
}

Javascript

Create a Graphic instance.

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

Create an ellipse, recangle and circle.

var myrect = mygraphic.addShape({
    type: "rect",
    stroke: {
        color:"#000",
        weight: 1
    },
    fill: {
        color: "#fde"
    },
    width:40,
    height:50
});
    
var myellipse = mygraphic.addShape({
    type: "ellipse",
    stroke: {
        color: "#ddd",
        weight: 2
    },
    fill: {
        color:"#f00",
        opacity: 0.5
    },
    width: 100,
    height: 30,
    x:100,
    y:50
});
    
var mycircle = mygraphic.addShape({
    type: "circle",
    stroke: {
        color:"#ff0",
        weight: 1
    },
    fill: {
        color:"#00f"
    },
    radius: 12,
    x: -5,
    y: -5
});

Add a method to apply a rotation to the rectangle and ellipse.

function rotateShapes(e)
{
    myrect.rotate(45);
    myellipse.rotate(45);
}

Add a method to apply a translate to the circle.

function translateShapes(e)
{
    mycircle.translate(50, 60);
}

Add click listeners to the buttons.

Y.on("click", rotateShapes, "#rotate");
Y.on("click", translateShapes, "#translate");

Complete Example Source

<div id="mygraphiccontainer"></div>
<div>
    <button type="button" id="rotate">Rotate</button><br/>
    <button type="button" id="translate">Translate</button><br/>
</div>
<script>
    YUI().use('graphics', function (Y) 
    { 
        var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
        var myrect = mygraphic.addShape({
            type: "rect",
            stroke: {
                color:"#000",
                weight: 1
            },
            fill: {
                color: "#fde"
            },
            width:40,
            height:50
        });
            
        var myellipse = mygraphic.addShape({
            type: "ellipse",
            stroke: {
                color: "#ddd",
                weight: 2
            },
            fill: {
                color:"#f00",
                opacity: 0.5
            },
            width: 100,
            height: 30,
            x:100,
            y:50
        });
            
        var mycircle = mygraphic.addShape({
            type: "circle",
            stroke: {
                color:"#ff0",
                weight: 1
            },
            fill: {
                color:"#00f"
            },
            radius: 12,
            x: -5,
            y: -5
        });
        function rotateShapes(e)
        {
            myrect.rotate(45);
            myellipse.rotate(45);
        }

        function translateShapes(e)
        {
            mycircle.translate(50, 60);
        }
        Y.on("click", rotateShapes, "#rotate");
        Y.on("click", translateShapes, "#translate");
    });
</script>