html中2D,3D效果的实现html动画效果
  2D
  2D就是平时看到的平⾯，就是在屏幕上⽔平和垂直的交叉线X轴Y轴。
  2d中的位移属性：transform:translate(参数1，参数2)  参数1：在X轴上移动的距离（正值右移，负值左移）参数2：在Y轴上移动的距离（正值下移，负值上移）
也可以单独设置XY轴，transform:translateX(),transform:translateY()。
  2d中的缩放属性：transform:scale(参数1，参数2)  参数在0~0.9999中为缩⼩，⼤于1放⼤，参数1：⽔平缩⼩放⼤  参数2：垂直缩⼩放⼤
也可以单独设置XY轴，transform:scaleX(),transform:scaleY()。
  2d中的旋转属性：transform:rotate()：同上，不过后⾯的单位不是px，⽽是deg。也是可以单独设置XY轴的旋转⾓度，⽅法同上⼀样。
  2d中的倾斜属性：transform:skew()；和旋转类似、也是通过deg设置⾓度，能分别单独设置XY轴的倾斜⾓度。
在上⾯的缩放，旋转，倾斜都是以中⼼为原点进⾏的，那么我们想改变这个原点要怎么做呢？transform-origin:(参数1，参数2)；我们这时就可以通过这个属性进⾏原点的设置，参数可以是负值。
  3D
  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 可以看出三个同⼤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。