Css3- transform

标签：垂直   nbsp   web   直线   翻转   变形   高度   firefox   opera   

转换是使元素改变形状、尺寸和位置的一种效果，对元素进行移动、缩放、转动、拉长或拉伸。

属性：transform

2D转换属性值

translate() // x,y位置移动 rotate() // 顺时针旋转角度 scale() // x,y元素尺寸增加或减少 skew() // x,y元素翻转给定的角度

1） ）translate()

通过 translate() 方法，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，元素从其当前位置移动。

例如：

div{    transform: translate(50px,100px);    -ms-transform: translate(50px,100px);       /* IE 9 */    -webkit-transform: translate(50px,100px);   /* Safari and Chrome */    -o-transform: translate(50px,100px);        /* Opera */    -moz-transform: translate(50px,100px);      /* Firefox */ }

值translate(50px,100px)把元素从左侧向右移动50px，从顶端向下移动100px。

2） ）rotate()

通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

例如：

div{    transform: rotate(30deg);    -ms-transform: rotate(30deg);       /* IE 9 */    -webkit-transform: rotate(30deg);   /* Safari and Chrome */    -o-transform: rotate(30deg);        /* Opera */    -moz-transform: rotate(30deg);      /* Firefox */ }

3） ）scale()

通过scale()方法，根据给定的宽度（X轴）和高度（Y轴）参数，元素的尺寸会增加或减少。

例如：

div{    transform: scale(2,4);    -ms-transform: scale(2,4);  /* IE 9 */    -webkit-transform: scale(2,4);  /* Safari 和 Chrome */    -o-transform: scale(2,4);   /* Opera */    -moz-transform: scale(2,4); /* Firefox */ }  

值scale(2,4)把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。

4） ）skew()方法 方法

通过skew()方法，根据给定的水平线（X轴）和垂直线（Y轴）参数，元素翻转给定的角度。

例如：

div{    transform: skew(10deg,20deg);    -ms-transform: skew(10deg,20deg);   /* IE 9 */    -webkit-transform: skew(10deg,20deg);   /* Safari and Chrome */    -o-transform: skew(10deg,20deg);    /* Opera */    -moz-transform: skew(10deg,20deg);  /* Firefox */ }

值skew(30deg,20deg)表示围绕X轴把元素翻转30度，围绕Y轴翻转20度。

3D转换属性值 转换属性值

rotateX() 围绕X轴根据角度旋转 rotateY() 围绕Y轴根据角度旋转

transform:rotateX(120deg); transform:rotateY(130deg);

1.2 CSS3过渡（ 过渡（transition）

）

Css3- transform

标签：垂直   nbsp   web   直线   翻转   变形   高度   firefox   opera   

原文地址：http://www.cnblogs.com/Steven-wangxi/p/6714015.html