This example shows how to apply transforms to shapes.

{{>graphics-transforms-source}}

HTML

```


```

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

``` {{>graphics-transforms-source}} ```