transform功能:旋转、缩放、倾斜、移动

先介绍下目前对transform支持的浏览器,Safari3.1+、Chrome8+、Firefox4+、Opera10+
各浏览器的书写:
Safari和Chrome  -webkit-transform
Firefox  -moz-transform
Opera  -o-transform

transform功能的基础知识
通过一个例子介绍语法含义:div{transform:rotate(45deg)} 使div元素顺时针旋转45度,deg是CSS3的“Values and Units”模块中定义的一个角度单位。
transform功能的分类,针对文字或图像有四种功能:旋转、缩放、倾斜、移动

旋转:使用rotate方法,在参数中加入角度值,后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针旋转。如前面的 div{transform:rotate(45deg)} 。正数为顺时针,负数为逆时针。

缩放:使用scale方法,在参数中指定缩放倍率。如 scale(0.5) 表示缩小50% ,完整代码 div{transform:scale(0.5)}。scale有2个参数,第一个表示水平方向,第二个表示垂直方向,中间用逗号隔开,如div{transform:scale(0.5,2)}。其中大于1是按原比例放大,小于1 是按原比例缩小。

倾斜:使用skew方法,同缩放方法scale,有两个参数,分别表示水平方向和垂直方向上的倾斜角度。如 skew(30deg,30deg) 表示水平方向向上倾斜30度,垂直方向向上倾斜30度。也可以只写一个参数,则表示只在水平方向上进行倾斜,垂直方向上不倾斜。

移动:使用translate方法,同上,也是有两个参数,分别表示水平方向和垂直方向,如 translate(50px,50px) 表示水平方向向右移动50个像素,垂直方向向下移动50个像素。值为负则方向相反。另外,可以只使用一个参数,省略另一个参数,则被视为只在水平方向上进行移动,垂直方向上不移动。

对一个元素使用多种变形的方法 
在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。
使用transform-origin属性,可以改变变形的基准点。
各浏览器写法
Safari和Chrome  -webkit-transform-origin
Firefox   -moz-transform-origin
Opera   -o-transform-origin
指定transform-origin属性值时,采用  基准点在元素水平方向上的位置,基础点在元素垂直方向上的位置   的方法,
其中  基准点在元素水平方向上的位置  中可以指定的值为 left   center    right
基准点在元素垂直方向上的位置   中可以指定的值为top   center   bottom



发表评论
验证码: 点击我更换图片