#

# Example: Using Transforms

This example shows how to apply transforms to shapes.

## 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>