您的位置：首页 > Web前端 > CSS

css3学习系列之初识 transform (一)

2015-03-17 09:32 471 查看

一、transform是哈?

　　从字面意思来看　transform的含义是：改变，使…变形；转换,对　没错　就是变形

　　变形当有　放大缩小东倒　西歪,刚好css3中 transform 也出这个　放几个类似词

　　transform:rotate(旋转)一个东西你想旋转多少度就是多少 #rotate { -webkit-transform:rotate(10deg);},

　　它的方向是顺时针方向 0- n度随你玩当然你输入一个负数也可以玩的

　　transform:skew(倾斜) 有点东倒西摆的样子和旋转有点类似但又不同,这个倾斜是把东西压扁了模样变形了

　　以垂直方向Y轴来分　左边为正,右边负

　　transform:scale　比例skwe:表示比例　是原来的多少倍　就是在原基础上放大或者缩小

　　transform:translate 变动,一听起哈叫变动太转业了吧,其实就是x y改变发生位移如translate(-120px,-100px);

　　-120px表示向左位移 -100表示向上位移

二、看看transform出现哈效果

　　

对照一的说明,在来看二的效果图　现在是不是知道 transform的基本功效果了!

三、上代码:

　　

<!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>
<title>css3元素旋转</title>
<style type="text/css">
.demo {

margin: 50px auto;
width:200px;
height:100px;
background-color:yellow;
}

/*rotate旋转: 是以顺时针方向*/
#rotate { -webkit-transform:rotate(10deg);}

/*skew倾斜: 以垂直方向Y轴来分　左边为正,右边负*/
#skew {-webkit-transform:skew(30deg);}

/*比例skwe:表示比例　是原来的多少倍*/
#scale{-webkit-transform:scale(1.5);}

/*translate变动： -120px表示向左位移 -100表示向上位移*/

#translate{-webkit-transform:translate(-120px,-100px);
-moz-transform:translate(120px,0)}
</style>
</head>
<body>

<div style="float:left; margin-left:100px">
<div class="demo" id="Div1">
你好world,我是角度旋转rotate
</div>
<br />
<div class="demo" id="Div2">
你好world,我是倾斜skew
</div>
<br />
<div class="demo" id="Div3">
你好world,我是比例scale
</div>
<br />
<div class="demo" id="Div4">
你好world,我是变动 位移 translate
</div>
</div>

<div style="float:left; margin-left:200px">
<div class="demo" id="rotate">
你好world,我是角度旋转rotate
</div>
<br />
<div class="demo" id="skew">
你好world,我是倾斜skew
</div>
<br />
<div class="demo" id="scale">
你好world,我是比例scale
</div>
<br />
<div class="demo" id="translate">
你好world,我是变动 位移 translate
</div>
<div>
</body>
</html>

好了初始就认识到这里.......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航