设置3D场景

    浏览器本身是一个二维平面，想要看成3D的话我们得要在平面的概念上加入另一个维度，也就是深度，因此要想设置3D场景我们得要设置从那个角度观察浏览器。

三维物体到浏览器窗口之间的距离

-webkit-perspective:800;

观察视点 两个属性值分别对应x轴和y轴

-webkit-perspective-origin:50% 50%;//浏览器的正中央

使用transform属性调整元素

-translate   位移操作

• translateX( x px )

• translateY( y px )

• translateZ( z px )

-rotate  旋转操作

• rotateX( x deg )

• rotetaY( y deg )

• rotateZ( z deg )

    事实我们要使用transform属性也可以设置成2d所以使用之前要写下面一句代码表示使用3d

-webkit-transform-style:-webkit-preserve-3d;

3D场景

• -webkit-perspection: 元素距离屏幕像素;

• -webkit-perspection-origin: (x轴, y轴);

• transform:

• translateX(x px)、translateY(y px)、translateZ(z px)

• rotateX(x deg)、rotateY(y deg)、rotateZ(z deg)

• -webkit-transform-style:-webkit-preserve-3d;
  

  
  

三维中，x、y、z三个坐标轴的方向

transform属性表示物体的平移与旋转

perspective-origin属性表示视点的位置

perspective代表物体距离窗口的距离

css 设置3D场景

设置3d场景

浏览器作为窗口，三维物体距离窗口的距离：

webkit-perspective:800px

视点，对应x轴，y轴:

webkit-perspective-origin:50% 50%

用webkit-transform-style：-webkit-preserve-3d告诉浏览器设置的是3D场景

用transform属性调整元素：

translate：

    translateX（）translateY（）translateZ（）

rotate：

    rotateX（）rotateY（）rotateZ（）

transform

    - translate    位移

    - rotate        旋转

perspective

 perspective和 perspective-origin

；

3D场景