CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用CSS3 Transform变形理解与应用 Transform：对元素进行变形；Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似Flash的补间动画。但只有两个关键贞。开始，结束。Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。
我们首先学习Transform
transform 2D/3D 转换属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
一.CSS3 2D 转换 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
1.2D Transform转换属性 属性
描述
CSS
transform
向元素应用 2D 或 3D 转换。
3
transform-origin
允许你改变被转换元素的位置。
3
2.2D Transform 方法 函数
描述
实例
试一试
转换
translateX(n)translateY(n)
沿着 X 或Y 轴移动元素。
translate(x,y)
沿着 X 和 Y 轴移动元素。
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
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 */}
试一试
缩放
scaleX(n)scaleY(n)
改变元素的宽或高度。
scale(x,y)
改变元素的宽度和高度。
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
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 */}
试一试
定义 2D 旋转
rotate(angle)
在参数中规定角度。turn是圈，1turn = 360deg；另外还有弧度rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn); //旋转两圈
值 rotate(30deg) 把元素顺时针旋转 30 度。
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 */}
试一试
倾斜
skewX(angle)skewY(angle)
沿着 X 、或Y轴。
skew(x-angle,y-angle)
沿着 X 和 Y 轴。
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}
试一试
使用六个值的矩阵。
matrix(n,n,n,n,n,n)
定义 2D 转换，使用六个值的矩阵。 matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
使用 matrix 方法将 div 元素旋转 30 度
div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}
试一试
二.CSS3 3D 转换 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
1.3D位移 在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。
随着px的增加，直观效果上：
X：从左向右移动
Y：从上向下移动
Z：以方框中心为原点，变大
从上图的效果可以看出，当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。
例子：
.stage { width: 300px; height: 300px; float: left; margin: 15px; position: relative; background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px;}.container { position: absolute; top: 50%; left: 50%; -webkit-transform-style: PReserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}.container img { position: absolute; margin-left: -35px; margin-top: -50px; }.container img:nth-child(1){ z-index: 1; opacity: .6;}.s1 img:nth-child(2){ z-index: 2; -webkit-transform: translate3d(30px,30px,200px); -moz-transform: translate3d(30px,30px,200px); -ms-transform: translate3d(30px,30px,200px); -o-transform: translate3d(30px,30px,200px); transform: translate3d(30px,30px,200px);}
效果：