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{ 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);}

可以对同一元素同时进行旋转，缩放，倾斜移动。但先移动与后移动的效果不同。
指定变形的基准点：使用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之后

参考学习网站：http://www.jb51.net/article/56337.htm

css3中变形处理的更多相关文章

  1. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  2. css3中变形与动画（一）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  3. css3中变形与动画（二）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

  4. css3中变形函数（同样是对元素来说的）和元素通过改变自身属性达到动画效果

    /*对元素进行改变(移动.变形.伸缩.扭曲)*/ .wrapper{ margin:100px 100px auto auto; width:300px; height:200px; border:2 ...

  5. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

  6. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  7. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  8. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  9. 第8章 CSS3中的变形与动画（上）

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

随机推荐

  1. PHP 获取网络接口文件流

    获取网络接口里面的文件流 php开发调用各种接口在所难免,有时须要传递非常多參数. 在传递參数过程中 '&' 有时会被 解析成 '&'导致请求失败 经过查找资料和比較,发现php提供了 ...

  2. Touch ID和Passcode框架，Apple Watch风格的应用布局

    本文转载至 http://www.cocoachina.com/ios/20141031/10110.html 水平滚动条(artwalk) 测试环境:Xcode 6.0,iOS 8.0     VE ...

  3. EasyPlayer Android RTSP播放器延迟再优化策略

    EasyPlayer延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是我 ...

  4. HDU 5247 找连续数 (set妙用)

    找连续数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. BTC、BCH和BSV三者到底有什么区别？

    比特币发展到今天已经有10个年头了,在这十年的发展中,比特币一共经历了两次重要的分裂,现在变成了三种货币,第一种是目前继承了比特币绝大多数遗产的BTC:第二种是BCH:第三种是BSV.那这三种货币到底 ...

  6. .htaccess技巧: URL重写(Rewrite)与重定向(Redirect) （转）

    目录 Table of Contents 一.准备开始:mod_rewrite 二.利用.htaccess实现URL重写(rewrite)与URL重定向(redirect) 将.htm页面映射到.ph ...

  7. （转）nginx-rtmp-module和ffmpeg搭建实时HLS切片

    1.rtmp服务器 nginx+pcre+zlib+openssl+nginx-rtmp-module ./configure \ --prefix=/usr/local/nginx \ --sbin ...

  8. CUDA：纹理内存

    纹理内存: 与常量内存类似,纹理内存是另一种形式的只读内存,并且同样缓存在芯片上.因此某些情况下能够减少对内存的请求并提供高效的内存带宽.纹理内存是专门为那些在内存访问模式中存在大量空间局部性的图形应 ...

  9. 原生js基础学习--正则RegExp

    转义字符"\" 使用反斜杠之后,会强制的将"\"之后的字符取消掉原来的意思转换成文本, 转义符号不会输出 var str= "abc\"de ...

  10. Django 模型层--单表

    ORM  简介 MTV或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这可以大大的减少了开 ...