加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS transform 属性 详解

css3基础 2022-07-14 17:34:08小码哥的IT人生shichen

CSS transform 属性

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性，请查看这个演示。

另请参阅：

CSS3 教程：CSS3 2D 转换

CSS3 教程：CSS3 3D 转换

HTML DOM 参考手册：transform 属性

实例

旋转 div 元素：

div
{
transform:rotate(7deg);
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页面底部有更多实例。

CSS 语法

transform: none|transform-functions;

属性值

值 描述 测试
none 定义不进行转换。 测试
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换，只是用 X 轴的值。 测试
translateY(y) 定义转换，只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。 测试

技术细节

默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform="rotate(7deg)"

更多实例

完整实例【扔到桌子上面的图片】：

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>
<div class="polaroid rotate_right">
<img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
<p class="caption">2010年上海世博会，中国馆。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例演示如何创建“宝丽来”图片，并旋转图片。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -ms- 的数字表示使用前缀的首个版本。

属性 Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

完整实例1：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>transform:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="none" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="rotate(10deg)" />rotate(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="rotate(20deg)" />rotate(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="rotate(30deg)" />rotate(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="rotate(40deg)" />rotate(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="rotate(45deg)" />rotate(45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="rotate(50deg)" />rotate(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="rotate(60deg)" />rotate(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="rotate(70deg)" />rotate(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="rotate(80deg)" />rotate(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="rotate(90deg)" />rotate(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="rotate(100deg)" />rotate(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="rotate(110deg)" />rotate(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="rotate(120deg)" />rotate(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="rotate(130deg)" />rotate(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="rotate(140deg)" />rotate(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="rotate(150deg)" />rotate(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="rotate(160deg)" />rotate(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="rotate(170deg)" />rotate(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="rotate(180deg)" />rotate(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="rotate(270deg)" />rotate(270deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="rotate(360deg)" />rotate(360deg)</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">rotate(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例2：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#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>
<body>
<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>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例3：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:translate(10px);
-webkit-transform:translate(10px);
-moz-transform:translate(10px);
-ms-transform:translate(10px);
-o-transform:translate(10px);
}
</style>
<body>
<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="translate(10px)" checked="checked" />translate(10px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="translate(20px)" />translate(20px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="translate(20px,10px)" />translate(20px,10px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="translate(20px,20px)" />translate(20px,20px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="translate(50px,50px)" />translate(50px,50px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="translate(100px,100px)" />translate(100px,100px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="translate(-25px,-25px)" />translate(-25px,-25px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" 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">translate(10px)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例4：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:translateX(10px);
-webkit-transform:translateX(10px);
-moz-transform:translateX(10px);
-ms-transform:translateX(10px);
-o-transform:translateX(10px);
}
</style>
<body>
<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="translateX(10px)" checked="checked" />translateX(10px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="translateX(20px)" />translateX(20px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="translateX(50px)" />translateX(50px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="translateX(100px)" />translateX(100px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="translateX(-25px)" />translateX(-25px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" 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">translateX(10px)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例5：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:translateY(10px);
-webkit-transform:translateY(10px);
-moz-transform:translateY(10px);
-ms-transform:translateY(10px);
-o-transform:translateY(10px);
}
</style>
<body>
<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="translateY(10px)" checked="checked" />translateY(10px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="translateY(20px)" />translateY(20px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="translateY(50px)" />translateY(50px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="translateY(100px)" />translateY(100px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="translateY(-25px)" />translateY(-25px)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" 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">translateY(10px)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例6：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
}
</style>
<body>
<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="scale(1.1,1.1)" checked="checked" />scale(1.1,1.1)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="scale(1.5,1.5)" />scale(1.5,1.5)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="scale(2,2)" />scale(2,2)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="scale(2,3)" />scale(2,3)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="scale(0.5,2)" />scale(0.5,2)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" 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">scale(1.1,1.1)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例7：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:scaleX(1.1);
-webkit-transform:scaleX(1.1);
-moz-transform:scaleX(1.1);
-ms-transform:scaleX(1.1);
-o-transform:scaleX(1.1);
}
</style>
<body>
<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="scaleX(1.1)" checked="checked" />scaleX(1.1)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="scaleX(1.5)" />scaleX(1.5)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="scaleX(2)" />scaleX(2)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="scaleX(3)" />scaleX(3)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="scaleX(0.5)" />scaleX(0.5)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" 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">scaleX(1.1)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例8：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:scaleY(1.1);
-webkit-transform:scaleY(1.1);
-moz-transform:scaleY(1.1);
-ms-transform:scaleY(1.1);
-o-transform:scaleY(1.1);
}
</style>
<body>
<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="scaleY(1.1)" checked="checked" />scaleY(1.1)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="scaleY(1.5)" />scaleY(1.5)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="scaleY(2)" />scaleY(2)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="scaleY(3)" />scaleY(3)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="scaleY(0.5)" />scaleY(0.5)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" 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">scaleY(1.1)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例9：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
</style>
<body>
<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="rotate(10deg)" checked="checked" />rotate(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="rotate(20deg)" />rotate(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="rotate(30deg)" />rotate(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="rotate(40deg)" />rotate(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="rotate(45deg)" />rotate(45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="rotate(50deg)" />rotate(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="rotate(60deg)" />rotate(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="rotate(70deg)" />rotate(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="rotate(80deg)" />rotate(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="rotate(90deg)" />rotate(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="rotate(100deg)" />rotate(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="rotate(110deg)" />rotate(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="rotate(120deg)" />rotate(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="rotate(130deg)" />rotate(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="rotate(140deg)" />rotate(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="rotate(150deg)" />rotate(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="rotate(160deg)" />rotate(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="rotate(170deg)" />rotate(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="rotate(180deg)" />rotate(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="rotate(270deg)" />rotate(270deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="rotate(360deg)" />rotate(360deg)</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">rotate(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例10：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:rotateX(10deg);
-webkit-transform:rotateX(10deg);
-moz-transform:rotateX(10deg);
-ms-transform:rotateX(10deg);
-o-transform:rotateX(10deg);
}
</style>
<body>
<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="rotateX(10deg)" checked="checked" />rotateX(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="rotateX(20deg)" />rotateX(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="rotateX(30deg)" />rotateX(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="rotateX(40deg)" />rotateX(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="rotateX(45deg)" />rotateX(45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="rotateX(50deg)" />rotateX(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="rotateX(60deg)" />rotateX(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="rotateX(70deg)" />rotateX(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="rotateX(80deg)" />rotateX(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="rotateX(90deg)" />rotateX(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="rotateX(100deg)" />rotateX(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="rotateX(110deg)" />rotateX(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="rotateX(120deg)" />rotateX(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="rotateX(130deg)" />rotateX(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="rotateX(140deg)" />rotateX(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="rotateX(150deg)" />rotateX(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="rotateX(160deg)" />rotateX(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="rotateX(170deg)" />rotateX(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="rotateX(180deg)" />rotateX(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="rotateX(270deg)" />rotateX(270deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="rotateX(360deg)" />rotateX(360deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_22" value="none" />none</li>
</ul>
</form>
<p class="note"><span>注释：</span>Internet Explorer 和 Opera 不支持 rotateX 方法。</p>
</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">rotateX(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例11：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:rotateY(10deg);
-webkit-transform:rotateY(10deg);
-moz-transform:rotateY(10deg);
-ms-transform:rotateY(10deg);
-o-transform:rotateY(10deg);
}
</style>
<body>
<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="rotateY(10deg)" checked="checked" />rotateY(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="rotateY(20deg)" />rotateY(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="rotateY(30deg)" />rotateY(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="rotateY(40deg)" />rotateY(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="rotateY(45deg)" />rotateY(45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="rotateY(50deg)" />rotateY(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="rotateY(60deg)" />rotateY(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="rotateY(70deg)" />rotateY(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="rotateY(80deg)" />rotateY(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="rotateY(90deg)" />rotateY(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="rotateY(100deg)" />rotateY(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="rotateY(110deg)" />rotateY(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="rotateY(120deg)" />rotateY(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="rotateY(130deg)" />rotateY(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="rotateY(140deg)" />rotateY(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="rotateY(150deg)" />rotateY(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="rotateY(160deg)" />rotateY(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="rotateY(170deg)" />rotateY(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="rotateY(180deg)" />rotateY(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="rotateY(270deg)" />rotateY(270deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="rotateY(360deg)" />rotateY(360deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_22" value="none" />none</li>
</ul>
</form>
<p class="note"><span>注释：</span>Internet Explorer 和 Opera 不支持 rotateY 方法。</p>
</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">rotateY(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例12：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:rotateZ(10deg);
-webkit-transform:rotateZ(10deg);
-moz-transform:rotateZ(10deg);
-ms-transform:rotateZ(10deg);
-o-transform:rotateZ(10deg);
}
</style>
<body>
<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="rotateZ(10deg)" checked="checked" />rotateZ(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="rotateZ(20deg)" />rotateZ(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="rotateZ(30deg)" />rotateZ(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="rotateZ(40deg)" />rotateZ(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="rotateZ(45deg)" />rotateZ(45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="rotateZ(50deg)" />rotateZ(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="rotateZ(60deg)" />rotateZ(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="rotateZ(70deg)" />rotateZ(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="rotateZ(80deg)" />rotateZ(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="rotateZ(90deg)" />rotateZ(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="rotateZ(100deg)" />rotateZ(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="rotateZ(110deg)" />rotateZ(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="rotateZ(120deg)" />rotateZ(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="rotateZ(130deg)" />rotateZ(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="rotateZ(140deg)" />rotateZ(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="rotateZ(150deg)" />rotateZ(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="rotateZ(160deg)" />rotateZ(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="rotateZ(170deg)" />rotateZ(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="rotateZ(180deg)" />rotateZ(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" value="rotateZ(270deg)" />rotateZ(270deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_21" value="rotateZ(360deg)" />rotateZ(360deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_22" value="none" />none</li>
</ul>
</form>
<p class="note"><span>注释：</span>Internet Explorer 和 Opera 不支持 rotateZ 方法。</p>
</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">rotateZ(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例13：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:skew(10deg,10deg);
-webkit-transform:skew(10deg,10deg);
-moz-transform:skew(10deg,10deg);
-ms-transform:skew(10deg,10deg);
-o-transform:skew(10deg,10deg);
}
</style>
<body>
<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="skew(10deg,10deg)" checked="checked" />skew(10deg,10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="skew(20deg,20deg)" />skew(20deg,20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="skew(30deg,30deg)" />skew(30deg,30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="skew(40deg,40deg)" />skew(40deg,40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="skew(45deg,45deg)" />skew(45deg,45deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="skew(50deg,50deg)" />skew(50deg,50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="skew(60deg,60deg)" />skew(60deg,60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="skew(70deg,70deg)" />skew(70deg,70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="skew(80deg,80deg)" />skew(80deg,80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="skew(90deg,90deg)" />skew(90deg,90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="skew(100deg,100deg)" />skew(100deg,100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="skew(110deg,110deg)" />skew(110deg,110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="skew(120deg,120deg)" />skew(120deg,120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="skew(130deg,130deg)" />skew(130deg,130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="skew(140deg,140deg)" />skew(140deg,140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="skew(150deg,150deg)" />skew(150deg,150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="skew(160deg,160deg)" />skew(160deg,160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="skew(170deg,170deg)" />skew(170deg,170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="skew(180deg,180deg)" />skew(180deg,180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_20" 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">skew(10deg,10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例14：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:skewX(10deg);
-webkit-transform:skewX(10deg);
-moz-transform:skewX(10deg);
-ms-transform:skewX(10deg);
-o-transform:skewX(10deg);
}
</style>
<body>
<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="skewX(10deg)" checked="checked" />skewX(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="skewX(20deg)" />skewX(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="skewX(30deg)" />skewX(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="skewX(40deg)" />skewX(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="skewX(50deg)" />skewX(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="skewX(60deg)" />skewX(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="skewX(70deg)" />skewX(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="skewX(80deg)" />skewX(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="skewX(90deg)" />skewX(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="skewX(100deg)" />skewX(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="skewX(110deg)" />skewX(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="skewX(120deg)" />skewX(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="skewX(130deg)" />skewX(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="skewX(140deg)" />skewX(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="skewX(150deg)" />skewX(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="skewX(160deg)" />skewX(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="skewX(170deg)" />skewX(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="skewX(180deg)" />skewX(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" 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">skewX(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例15：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
#MyDIV
{
width:200px;
height:100px;
margin:80px;
border:1px solid black;
background-color:lightblue;
}
#MyDIV
{
transform:skewY(10deg);
-webkit-transform:skewY(10deg);
-moz-transform:skewY(10deg);
-ms-transform:skewY(10deg);
-o-transform:skewY(10deg);
}
</style>
<body>
<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="skewY(10deg)" checked="checked" />skewY(10deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="skewY(20deg)" />skewY(20deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="skewY(30deg)" />skewY(30deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="skewY(40deg)" />skewY(40deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="skewY(50deg)" />skewY(50deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="skewY(60deg)" />skewY(60deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="skewY(70deg)" />skewY(70deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="skewY(80deg)" />skewY(80deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="skewY(90deg)" />skewY(90deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="skewY(100deg)" />skewY(100deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="skewY(110deg)" />skewY(110deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="skewY(120deg)" />skewY(120deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="skewY(130deg)" />skewY(130deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="skewY(140deg)" />skewY(140deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="skewY(150deg)" />skewY(150deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="skewY(160deg)" />skewY(160deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="skewY(170deg)" />skewY(170deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="skewY(180deg)" />skewY(180deg)</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" 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">skewY(10deg)</span>;
}
</pre>
</div>
<script>
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;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024