Copyright © 2000-2016 www.knowsky.com All rights reserved | 沪ICP备05001343号

王朝学院·作者佚名 2016-05-23

CSS3 变形记css3 变形transform属性语法：

transform：none | <transform-function> [<transform-function>]*

可用于内联和块元素。默认值为none，表示元素不变形。另一个属性是变形函数，可以有多个。

常用的2D变形函数：

translate():移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY()。scale():缩小或放大元素，可以使元素尺寸发生变化。在此基础上有两个扩展函数scaleX()和scaleY():。rotate():旋转元素。skew():让元素倾斜。在此基础上有两个扩展元素skewX()和skewY()。matrix():定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

常用的3D变形函数：

translate3d():移动元素，用来指定一个3D变形移动位移量。translateZ():指定3D位移在Z轴的位移量。scale3d():缩放一个元素。scaleZ():指定Z轴的缩放向量。rotate3d():指定元素具有一个三维旋转的角度。rotateX(),rotateY(),rotateZ():让元素具有一个旋转角度。perspective():指定一个透视投影矩阵。matrix3d():定义矩阵变形。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } #div{ box-sizing:border-box; margin:0 auto; width:200px; height:100px; border:solid; position:relative; } #div div{ width: 50px; height: 50px; background: #ffd800; /*X轴偏移100px*/ transform: translate(100px); }</style></head><body><div id="div"> <div></div></div></body></html>

#div div{ width: 50px; height: 50px; background: #ffd800;/*按比例放大1.5倍*/ transform:scale(1.5); }

#div div{ width: 50px; height: 50px; background: #ffd800;/*顺时针旋转45度*/ transform:rotate(45deg); }

#div div{ width: 50px; height: 50px; background: #ffd800;/*x轴倾斜30度*/ transform:skew(30deg); }

transform-origin属性：用来指定元素的中心位置，默认变形的原点在元素的中心点。2D变形中可接受X轴与Y轴的位置，3D变形还包括Z轴三个值。可用关键词，长度值与百分比，不能影响transform-translate变形。

#div div{ width: 50px; height: 50px; background: #ffd800;/*修改变形起点为左上角*/ transform-origin:left top; transform:rotate(30deg); }

transform-style属性：指定嵌套元素如何在3D空间中呈现。主要有两个值，flat(默认，表示所有子元素在2D平面呈现)，PReserve-3d(所有子元素在3D平面呈现)。perspective属性：该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D平面上，简单理解为，用来设置用户和元素3D空间Z轴平面之间的距离。其效应由他的值决定，值越小，用户与3D空间Z平面距离越近，否则，越远。如果不指定透视，则Z轴空间中的所有点将平铺在同一个2D平面中。perspective-origin属性：用来决定perspective属性的源点角度。backface-visibility属性：决定元素旋转背面是否可见。有二个值，visible(默认，可见)，hidden(隐藏)。