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

浏览数：49 / 时间：2015年06月09日

一、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>