一、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>
好了初始就认识到这里.......