html中2D,3D效果的实现

　　2D动画

　　2D就是平时看到的平面，就是在屏幕上水平和垂直的交叉线X轴Y轴。3d

　　2d中的位移属性：transform:translate(参数1，参数2)　　参数1:在X轴上移动的距离（正值右移，负值左移）参数2:在Y轴上移动的距离（正值下移，负值上移）orm

也能够单独设置XY轴，transform:translateX(),transform:translateY()。blog

　　2d中的缩放属性：transform:scale(参数1，参数2)　　参数在0~0.9999中为缩小，大于1放大，参数1：水平缩小放大　　参数2：垂直缩小放大form

也能够单独设置XY轴，transform:scaleX(),transform:scaleY()。基础

　　2d中的旋转属性：transform:rotate():同上，不事后面的单位不是px，而是deg。也是能够单独设置XY轴的旋转角度，方法同上同样。transform

　　2d中的倾斜属性：transform:skew();和旋转相似、也是经过deg设置角度，能分别单独设置XY轴的倾斜角度。方法

在上面的缩放，旋转，倾斜都是以中心为原点进行的，那么咱们想改变这个原点要怎么作呢？transform-origin:(参数1，参数2)；咱们这时就能够经过这个属性进行原点的设置，参数能够是负值。im

 　　3Dimg

　　3d其实就是在2d是基础上增长Z轴，Z轴是面向咱们的轴线，要实现3D效果，须要在父元素中创建一个3D舞台，让子元素在3D空间里面进行变化。

transform-style:preserve-3d;该属性让元素变为一个3D舞台。

　　3D的属性和2D同样，只是增长了一条Z轴的参数。transform:translate(参数1，参数2，参数3)　　参数1:在X轴上移动的距离（正值右移，负值左移）参数2:在Y轴上移动的距离（正值下移，负值上移）参数3：在Z轴上移动的距离（正值指向屏幕外，负值指向屏幕内）

　　须要注意的一点是translateZ()　//不能是百分比。

　　3D的旋转和缩放的简写：transform:scale3d(参数1，参数2，参数3)，transform:rotate3d(参数1，参数2，参数3)　　也能够transform:scaleX() scaleY() scaleZ();

在3D中还有一个重要的属性是：perspective(景深)能产生近大远小的视觉效果（结合动画能较好实现），该属性通常在父元素中使用，也能够在子元素中设置（transform:perspective();）但不能设置两个值，否则会冲突。建议在父元素中设置，数值在900~1200之间比较合适。若是值过小你就会看不见。

　设置perspective　绿色前面的大，后面的小（红色大小是相同的）　　　　　没有设置 perspective 能够看出三个同大