变形处理之Transform属性

今天来介绍CSS3的一个神奇的属性——transform,它可以实现文字或图像的旋转、缩放、倾斜、移动四种类型的变形处理。
首先我们做一实例:
定义CSS——
#box {
width:100px;
height:60px;
background:#909;
margin:100px auto;
}
定义HTML——
<div id="box"></div>
图示效果:


1、旋转,属性表达方法为transform:rotate(*)。Rotate是旋转的意思;括号里*值的形式是“数值”+“deg”,表示旋转的角度;旋转角度是按顺时针方向来计算的。(deg是CSS3的“Values and Units”模块中定义的一个角度单位。)
使用方法:如果想要将实例中的div旋转,只需要如下定义:
#box {transform:rotate(30deg);}
即可看到这样的效果:


2、缩放,属性表达方式为transform:scale(num,num)。Scale是按比例缩放的意思;两个num为数值,表示缩放倍率,举俩例子:“0.5”表示缩小50%,“2”表示放大1倍。这里两个num值分别表示水平方向和垂直方向,若只设置一个值,则表示两个方向取同值。
使用方法:如果想要将实例中的div放大1倍,只需要如下定义:
#box {transform:scale(2);}
即可看到这样的效果:

3、倾斜,属性表达方式为transform:skew(num,num)。Skew是使歪斜(扭曲)的意思;这里的num值为“数值”+“deg”的形式,表示指定的倾斜角度;同样的,两个num值分别表示水平方向的倾斜角度和垂直方向的倾斜角度,若只设置一个值,则表示两个方向取同值。
使用方法:如果想要将实例中的div水平倾斜30度垂直倾斜5度,只需要如下定义:
#box {transform:skew(30deg,5deg);}
即可看到这样的效果:

4、移动(非动画),属性表达方式为transform:translate(num,num)。Translate方法表示移动的意思,注意,不是我们看到的那种移动动画,而是处理一个移动结果。这里两个num值为像素值的形式,分别表示水平方向上的移动距离和垂直方向上的移动距离,这里需要注意了,若只设置一个值,则不再表示两个方向取同值,而是默认为只设置了水平方向的移动值。所以就算两个移动的值相等,也不能省略了。规范得来定义单一方向的写法应是
translateX(30px);//表示水平方向移动30px
translateY(30px);//表示垂直方向移动30px
使用方法:如果想要将实例中的div水平方向和垂直方向分别移动30px,只需要如下定义:#box {transform:translate(30px,30px);}
这个就不再展示效果了,你懂的。:P
关于transform属性,IE尚不支持,目前可支持的浏览器有:Chrome8+, FireFox4+, Opera10+,Safari3.1+。
★ 指定变形的基准点
大家动手做下实例会发现,transform方法在做以上四种变形时,都是以元素的中心点为基准点来进行的,这个是默认的处理方法。那我们能否改变这个基准点呢?
Sure,那么我们就顺便介绍下transform-orign属性,举个例子就明白怎么使用了:
transorm-origin:left top;表示基准点为元素的左上角。

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP