html css3d效果,html，css的3D变形

html，css的3D变形：

首先要了解一个概念：景深perspective

景深可以营造一个近大远小的效果，在IE、opera浏览器目前不支持这个属性，在safari和chrome里，要用-webkit-perspective。

可以直接用perspective这个属性，也可以用transform：perspective，一般直接用perspective，不过perspective一般要用在需要效果的父元素上。所以一般都给需要3D变形的元素上，加上一个空的父元素包裹器。perspective的值越大，效果越不明显，越小，效果越明显。

设置完景深后，可以给需要3D效果的元素设置transform：rotate(x，y，z，angle)，x，y，z都是0~1之间的数值，x：0代表在x轴不变形，angle是要变形的角度。

3D变形效果有旋转、缩放、平移几种效果，没有斜切的3D效果。

即可以设置transform:translate(x,y,z),其中平移效果中x、y值可以是数值，也可以是百分比，z值只能是数值，不能是百分比，如果是百分比的话，则平移效果无效。

可以设置transform:scale3D(x,y,z)

另外还有一个transform-style可以营造空间感，这个属性也是和perspective一样，要放到父元素上，作用效果是在子元素上。

如图效果图：

是通过下面一段代码实现的：

也可以直接用-webkit-transform：perspective(100)设置景深效果，如图：