一、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>
好了初始就认识到这里.......
时间： 2024-08-02 09:29:03