Blog

变形处理之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

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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