60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<html>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<head>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<meta http-equiv="content-type" content="text/html; charset=utf-8">
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<style>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp#rect {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp width: 200px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp height: 100px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp position: absolute;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp top: 50px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp left: 100px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp background-color: #fc0;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp transform: matrix(1, -0.2, 0, 1, 0, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp border: 1px solid #000;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp}
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp#rect2 {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp background-color: #9aa;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp border: 1px solid #000;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp width: 300px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp height: 200px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp position: absolute;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp top: 200px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp left: 0px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -o-transform: matrix(1, 0, 0.6, 1, 250, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp -ms-transform: matrix(1, 0, 0.6, 1, 250, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp transform: matrix(1, 0, 0.6, 1, 250, 0);
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp}
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp#graphiccontainer {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp position: absolute;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp top: 0px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp left: 600px;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp}
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp</style>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts.css">
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<!-- BEGIN EXAMPLE CODE -->
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp</head>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<body class="yui3-skin-sam">
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<script src="/build/yui/yui.js"></script>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<div id="rect"></div>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<div id="rect2"></div>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<div id="graphiccontainer"></div>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp<script type="text/javascript">
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp YUI({filter:"raw"}).use('graphics', function(Y) {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp var mygraphic,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp myrect,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp myrect2;
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp mygraphic = new Y.Graphic({render: "#graphiccontainer"});
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp mygraphic.addShape({
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp type:"rect",
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp fill: {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp color: "#fc0"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp },
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp stroke: {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp weight: 1,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp color: "#000"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp },
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp width: 200,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp height: 100,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp x: 100,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp y: 50,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp transform: "matrix(1, -0.2, 0, 1, 0, 0)"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp });
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp mygraphic.addShape({
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp type: "rect",
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp fill: {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp color: "#9aa"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp },
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp stroke: {
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp weight: 1,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp color: "#000"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp },
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp width: 300,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp height: 200,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp x: 0,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp y: 200,
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp transform: "matrix(1, 0, 0.6, 1, 250, 0)"
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp });
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp });
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp</script>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp</body>
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp</html>