CSS3中的transform变形
在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。
目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+
一、旋转：
CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。
例一：一个黄色的div元素，通过在样式代码中使用“transform: rotate(45deg)”，语句使这个div元素顺时针旋转45度。deg是CSS3的“Values and Units”模块中定义的一个角度单位
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform旋转</title>
6 <style>
7 div {
8 width: 300px;
9 margin: 150px auto;
10 background-color: yellow;
11 text-align: center;
12 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
13 -moz-transform: rotate(45deg); /* for Firefox */
14 -ms-transform: rotate(45deg); /* for IE */
15 -o-transform: rotate(45deg); /* for Opera */
16 }
17 </style>
18 </head>
19 <body>
20 <div>黄色div</div>
21 </body>
22 </html>
运行结果（Chrome 14）:
二、缩放：
scale方法实现文字或图像的缩放效果，参数中指定缩放倍率，例如：“scale(0.5)”表示缩小50%，参数可以是整数，也可以是小数。
例二：将一个div元素缩小50%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform缩放</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: scale(0.5); /* for Chrome || Safari */
-moz-transform: scale(0.5); /* for Firefox */
-ms-transform: scale(0.5); /* for IE */
-o-transform: scale(0.5); /* for Opera */
}
</style>
</head>
<body>
<div>黄色div</div>
</body>
</html>
运行结果（Chrome 14）:
三、倾斜：
使用skew方法来实现文字或图像的倾斜效果，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。例如“skew(30deg, 30deg)”表示水平方向上倾斜30度，垂直方向上也倾斜30度，
例三：将一个div元素在水平方向上倾斜30度，垂直方向上倾斜30度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform倾斜</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: skew(30deg, 30deg); /* for Chrome || Safari */
-moz-transform: skew(30deg, 30deg); /* for Firefox */
-ms-transform: skew(30deg, 30deg); /* for IE */
-o-transform: skew(30deg, 30deg); /* for Opera */
}
</style>
</head>
<body>
<div>黄色div</div>
</body>
</html>
运行结果（Chrome 14）:
注意：skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这可不是说水平方向和垂直方向一样，这种情况视为只在水平方向倾斜，垂直方向上不倾斜。
看一下运行结果：
四、移动：
使用translate方法来实现将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。例如“translate(50px, 50px)”表示水平方向上移动50个像素，垂直方向上移动50个像素。
例四：将一个div元素水平方向上移动50个像素，垂直方向上移动50个像素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform移动</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(50px, 50px); /* for Chrome || Safari */
-moz-transform: translate(50px, 50px); /* for Firefox */
-ms-transform: translate(50px, 50px); /* for IE */
-o-transform: translate(50px, 50px); /* for Opera */
}
</style>
</head>
<body>
<div>黄色div</div>
</body>
</html>
运行结果（Firefox 7）:
注意：translate方法中的两个参数也可以修改成只使用一个参数，跟skew方法类似，省略另一个参数，这种情况视为只在水平方向移动，垂直方向上不移动。
运行结果(Firefox 7)：
对一个元素使用多种变形的方法：
例五：对一个div元素，先移动(向右移动150px，向下移动200px)，然后旋转(顺时针旋转45度)，最后缩放(放大1.5倍)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform多重变形（先移动，然后旋转，最后缩放）</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Chrome || Safari */
-moz-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Firefox */
-ms-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for IE */
-o-transform: translate(150px, 200px) rotate(45deg) scale(1.5); /* for Opera */
}
</style>
</head>
<body>
<div>黄色div</div>
</body>
</html>
运行结果（Chrome 14）：
下面把上面代码中几个变形方法的顺序调整一下，先旋转(顺时针旋转45度)，然后缩放(放大1.5倍)，移动(向右移动150px，向下移动200px), 看看结果怎样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform多重变形（先旋转，然后缩放，最后移动）</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Chrome || Safari */
-moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Firefox */
-ms-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for IE */
-o-transform: rotate(45deg) scale(1.5) translate(150px, 200px); /* for Opera */
}
</style>
</head>
<body>
<div>黄色div</div>
</body>
</html>
运行结果（Chrome 14）:
通过上面两个示例可以看出，元素在两个页面上所处位置并不相同，为什么会这样呢？
先看第一个例子：首先向右移动150px，向下移动200px，元素的中心点在水平方向先移动150px，再在垂直方向向下移动200px，然后在旋转45度，放大1.5倍。
第二个例子：首先旋转45度，并且放大了1.5倍，这时候元素是倾斜了45度角的，在移动的话，元素就是按45度角的方向向右移动150px，向下移动200px是沿着与水平方向呈225度方向移动的。看下下面的示意图就很明显了：
怎么样，很容易看明白吧。
指定变形的基准点：
使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。
例六：两个div元素，首先不改变变形的基准点，将第二个div元素进行旋转。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基准点变形</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 display: inline-block;
11 line-height: 200px;
12 text-align: center;
13 }
14 div.a {
15 background-color: yellow;
16 }
17 div.b {
18 background-color: green;
19 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
20 -moz-transform: rotate(45deg); /* for Firefox */
21 -ms-transform: rotate(45deg); /* for IE */
22 -o-transform: rotate(45deg); /* for Opera */
23 }
24 </style>
25 </head>
26 <body>
27 <div class="a">黄色div</div>
28 <div class="b">绿色div</div>
29 </body>
30 </html>
运行结果（Chrome 14）：
下面使用transform-origin属性把变形的基准点修改为第二个元素的左下角，代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Transform指定基准点变形</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 display: inline-block;
11 line-height: 200px;
12 text-align: center;
13 }
14 div.a {
15 background-color: yellow;
16 }
17 div.b {
18 background-color: green;
19 -webkit-transform: rotate(45deg); /* for Chrome || Safari */
20 -moz-transform: rotate(45deg); /* for Firefox */
21 -ms-transform: rotate(45deg); /* for IE */
22 -o-transform: rotate(45deg); /* for Opera */
23 /* 修改变形基准点 */
24 -webkit-transform-origin: left bottom; /* for Chrome || Safari */
25 -moz-transform-origin: left bottom; /* for Firefox */
26 -ms-transform-origin: left bottom; /* for IE */
27 -o-transform-origin: left bottom; /* for Opera */
28 }
29 </style>
30 </head>
31 <body>
32 <div class="a">黄色div</div>
33 <div class="b">绿色div</div>
34 </body>
35 </html>
运行结果（Chrome 14）：
指定transform-origin属性值的时候，采用“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”的方法，其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right，“基准点在垂直方向上的位置”中可以指定的值为top、center、bottom。
CSS3中的transform变形的更多相关文章
- CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...
- 对CSS3中的transform：Matrix（）矩阵的一些理解
只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- CSS3中的transform
CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. transform 在2D里主要是4个方法.除了rotate 其他都是接受x y值 translate skew rotate sca ...
- css3中trastion,transform,animation基本的了解
毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...
- css3中的transform、transition、translate、animation（@keyframes）的区别
一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...
- css3中有关transform的问题
Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.
- CSS3中的transform转换属性
属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
随机推荐
- 如何让IIS 8.0支持无后缀图片的访问
进入“MIME类型”模块后,我们点击右侧的“添加”,然后填好文件扩展名和类型值.对于无后缀的图片文件,扩展名只需填写“点”符号即可,类型值根据图片文件实际的扩展名填写.如果是jpeg格式的,那么就填写 ...
- @font-face扒站的步骤
今天模仿百度首页手机版的时候遇到的@font-face的问题,现在整理一下. 问题:图中红色区域,在拷贝F12样式的时候,并没有出现这些小图标. 图1:百度的效果 ...
- jquery 当前页导航高亮显示
<script type="text/javascript"> $(document).ready(function(){ var myNav = $("#n ...
- hdu 4548 第六周H题(美素数)
第六周H题 - 数论,晒素数 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u De ...
- OpenMP 并行化处理测试
OpenMP 并行化处理测试 #pragma omp parallel for 这条语句是用来指定后面的for循环语句变成并行执行的,将for循环里的语句变成并行执行后效率会不会提高呢?还是测试一 下 ...
- mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次
1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...
- 7.3.1 Establishing a Backup Policy
7.3 Example Backup and Recovery Strategy 备份和恢复策略实例 7.3.1 Establishing a Backup Policy 7.3.2 Using Ba ...
- 【HDOJ】3500 Fling
题意巨难懂.简言之,就是球互相碰撞时,主动碰撞的球将会停止,另一个球将沿着碰撞方向继续移动,不断碰撞.但是无法弹射紧挨着的球,但是若a弹射b,bc相邻,这种情况b可以弹射c. #include < ...
- COJ 2024 仙境传奇（五）——一个天才的觉醒 素数筛
整理模板,同时测了一下memset,for,fill到底谁快... 结果:memset最快,其次是for,fill最慢QAQ.... #include<iostream> #include ...
- NOIP
最近把历年题刷一下吧... 发现0几年的题不是爆搜就是高精度,恶心死了...直接跳过,做些有意思的... P1129产生数 floyed之后乘法原理统计 P1810导弹拦截 贪心,按距某个点的距离 ...