transfrom功能
在css3 中可以使用transfrom功能实现文字或图像的旋转，缩放，倾斜，移动等变形处理
deg是css3中使用的一种角度单位。
旋转： 使用rotate方法，在参数中加入角度值，在角度值后要加上角度单位deg。旋转方向为顺时针。例rotate（45deg）
缩放： 使用scale方法，在参数中指定缩放的倍率，0.5表示缩小一半。scale（水平缩放倍率，垂直缩放倍率），可以同时修改X，Y的缩放。scale（0.5,2）
倾斜： 使用skew方法，在参数中加入角度值，skew（水平倾斜角度，垂直倾斜角度），如果只有一个参数则认为只在水平方向倾斜。skew（30deg，30deg）
移动： 使用translate方法，在参数中加入移动值，translate（水平移动距离，垂直移动距离）以现在所处位置为原点，右边为X轴，下边为Y轴。
若只是用一个参数则默认为只在X轴方向移动，垂直方向不移动。
#transform-1{ 400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);}
#transform-2{ 400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5);}
#transform-3{ 400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5,2);}
#transform-4{ 400px; margin:150px auto; background-color:#CF0; text-align:center; transform:skew(30deg,30deg);}
#transform-5{ 400px; margin:150px auto; background-color:#CF0; text-align:center; transform:translate(30px,30px);}
可以对同一元素同时进行旋转，缩放，倾斜移动。但先移动与后移动的效果不同。
指定变形的基准点：使用transfrom方法进行变形的时候是使用元素的中心为基准点进行变形的，使用transform-origin可以改变变形的基准点。
- 使用3D变形功能
旋转：transfrom：rotateX(30deg) rotateY(45deg) rotateZ(45deg);可以同时实现在不同轴上旋转。
如果定义一个函数，动态改变旋转的度数。则可以实现动态效果。
缩放：transfrom：scaleX(0.5) scaleY(1) scaleZ(2);可以同时实现在不同轴上缩放。
倾斜：transfrom：skewX skewY方法能使元素在x轴，y轴上顺时针倾斜，但是没有skewZ方法，二维倾斜。
移动：使用translateX方法，translateY，translateZ在参数中加入移动数值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #transform-1{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);} #transform-2{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5);} #transform-3{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:scale(0.5,2);} #transform-4{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:skew(30deg,30deg);} #transform-5{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:translate(30px,30px);} #transform-6{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg) scale(0.5,2) translate(30px,30px);} #transform-7{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform: translate(30px,30px) rotate(45deg) scale(0.5,2);} #transform-8{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);transform-origin:left bottom;} #transform-9{ width:400px; margin:150px auto; background-color:#CF0; text-align:center; transform:rotate(45deg);transform-origin:top bottom;} #div{ width:300px; height:100px; background-color:#3FF; text-align:center; transform: scale(0.5) rotateX(30deg) rotateY(45deg);} #divv{ width:300px; height:100px; background-color:#3FF; text-align:center; transform: scaleX(0.5) scaleY(2); margin:40px auto; } </style> </head> <body onload="rotatex()"> <div id="transform-1">示例文字</div> <div id="transform-2">示例文字</div> <div id="transform-3">示例文字</div> <div id="transform-4">示例文字</div> <div id="transform-5">示例文字</div> <div id="transform-6">示例文字</div> <div id="transform-7">示例文字</div> <div id="transform-8">示例文字</div> <div id="transform-9">示例文字</div> <div id="div">示例</div> <input type="button" value="绕X轴转" onclick="rotatex()"/> <input type="button" value="绕Y轴转" onclick="rotatey()"/> <input type="button" value="绕Z轴转" onclick="rotatez()"/> <div id="divv">示例</div> <input type="button" value="绕X轴放大" onclick="scalex()"/> <input type="button" value="绕Y轴放大" onclick="scaley()"/> <input type="button" value="绕Z轴放大" onclick="scalez()"/> </body> <script type="text/javascript"> var n,rotx,roty,rotz; var div=document.getElementById("div"); function rotatex() { n=0; clearInterval(rotx); rotx=setInterval("startXRotate()",10); } function startXRotate() { n = n + 1; div.style.transform ="rotateX(" + n + "deg)"; if (n ==450) { clearInterval(rotx); n = 0; } } function rotatey() { n = 0; clearInterval(roty); roty = setInterval("startYRotate()",10); } function startYRotate() { n = n + 1; div.style.transform = "rotateY(" + n + "deg)"; if (n == 580) { clearInterval(roty); n = 0; } } function rotatez() { n = 0; clearInterval(rotz); rotz = setInterval("startZRotate()", 10); } function startZRotate() { n = n + 1; div.style.transform = "rotateZ(" + n + "deg)"; if (n == 360) { clearInterval(rotz); n = 0; } } var n,scx,scy,scz; var div1=document.getElementById("divv"); function scalex() { n=0; clearInterval(scx); scx=setInterval("startXscale()",10); } function startXscale() { n = n + 0.01; div1.style.transform ="scaleX(" + n + ")"; if (n >=2) { clearInterval(scx); n = 0; } } function scaley() { n = 0; clearInterval(scy); scy = setInterval("scaleYRotate()",10); } function scaleYRotate() { n = n + 0.0001; div1.style.transform = "scaleY(" + n + ")"; if (n >= 2) { clearInterval(scy); n = 0; } } function scalez() { n = 0; clearInterval(scz); scz = setInterval("scaleZRotate()", 10); } function scaleZRotate() { n = n + 0.1; div1.style.transform = "scaleZ(" + n + ")"; if (n >= 2) { clearInterval(scz); n = 0; } } </script> </html>
代码效果图
脚本的位置会影响程序的执行吗？会的
引用答案——通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。
放置于<head></head>之间
将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的，将 JavaScript 代码放置于<head></head> 标签之间，可以确保在需要使用脚本之前，它已经被载入了；
放置于<body></body>之间
也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况：我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的，为避免 JavaScript 代码操作 HTML 元素时，HTML 元素还未载入而报错（对象不存在），因此需要将这段代码写到 HTML 元素后面，
但通常情况下，我们操作页面元素一般都是通过事件来驱动的，所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。
如果 HTML 文档声明为 XHTML ，<script></script> 标签必须在 CDATA 部分内声明，否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：
外部引用 JavaScript 代码
将 JavaScript 代码（不包括<script></script>标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ，并在 HTML 文档 <script></script> 标签中使用 src 属性来引用该文件；
在使用了外部引用 JavaScript 代码之后，其好处显而易见：
1.避免在 JavaScript 代码里使用 <!-- ... //-->
2.避免使用难看的 CDATA
3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护
4.HTML 文档更小，利于搜索引擎收录
5.可以压缩、加密单个 JavaScript 文件
6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次）
7.避免使用复杂的 HTML 实体，如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1)
将 JavaScript 代码形成为外部文件，也会增加服务器的 HTTP 请求负担，在超高并发请求的环境下，这并不是一个好的策略。另外 在引用外部 js 文件时，需注意文件的正确路径。
我认为页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后