代码示例：（标识：css_transform_matrix1）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" href="/static/demo/html/css/cc.css" />
<script type="text/javascript" src="/static/demo/html/css/cs.js"></script>
<script type="text/javascript">
<!--
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.transform=strValue;
document.getElementById(strId).style.WebkitTransform=strValue;
document.getElementById(strId).style.MozTransform=strValue;
document.getElementById(strId).style.OTransform=strValue;
document.getElementById(strId).style.msTransform=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
//-->
</script>
<style>
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>transform:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="matrix(0.866,0.5,-0.5,0.866,0,0)" checked="checked" />matrix(0.866,0.5,-0.5,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="matrix(0.866,0.5,-0.6,0.866,0,0)" />matrix(0.866,0.5,-0.6,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="matrix(0.866,0.5,-0.7,0.866,0,0)" />matrix(0.866,0.5,-0.7,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="matrix(0.866,0.5,-0.8,0.866,0,0)" />matrix(0.866,0.5,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="matrix(0.866,0.6,-0.8,0.866,0,0)" />matrix(0.866,0.6,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="matrix(0.866,0.7,-0.8,0.866,0,0)" />matrix(0.866,0.7,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="matrix(0.866,0.8,-0.8,0.866,0,0)" />matrix(0.866,0.8,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="matrix(0.786,0.8,-0.8,0.866,0,0)" />matrix(0.786,0.8,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="matrix(0.686,0.8,-0.8,0.866,0,0)" />matrix(0.686,0.8,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="matrix(0.586,0.8,-0.8,0.866,0,0)" />matrix(0.586,0.8,-0.8,0.866,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="matrix(0.586,0.8,-0.8,0.786,0,0)" />matrix(0.586,0.8,-0.8,0.786,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="matrix(0.586,0.8,-0.8,0.686,0,0)" />matrix(0.586,0.8,-0.8,0.686,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="matrix(0.586,0.8,-0.8,0.586,0,0)" />matrix(0.586,0.8,-0.8,0.586,0,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="matrix(0.586,0.8,-0.8,0.586,10,0)" />matrix(0.586,0.8,-0.8,0.586,10,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="matrix(0.586,0.8,-0.8,0.586,20,0)" />matrix(0.586,0.8,-0.8,0.586,20,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="matrix(0.586,0.8,-0.8,0.586,30,0)" />matrix(0.586,0.8,-0.8,0.586,30,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="matrix(0.586,0.8,-0.8,0.586,40,0)" />matrix(0.586,0.8,-0.8,0.586,40,0)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="matrix(0.586,0.8,-0.8,0.586,40,10)" />matrix(0.586,0.8,-0.8,0.586,40,10)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="matrix(0.586,0.8,-0.8,0.586,40,20)" />matrix(0.586,0.8,-0.8,0.586,40,20)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="matrix(0.586,0.8,-0.8,0.586,40,30)" />matrix(0.586,0.8,-0.8,0.586,40,30)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="matrix(0.586,0.8,-0.8,0.586,40,40)" />matrix(0.586,0.8,-0.8,0.586,40,40)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_22" value="none" />none</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV">MyDIV</div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
#MyDIV
{
transform:<span id="CodeValue">matrix(0.866,0.5,-0.5,0.866,0,0)</span>;
}
</pre>
</div>
</div><!--wrapper End-->
</body>
<script type="text/javascript">tiy_onload()</script>
</html>
