html 3d坐标,HTML3D

一、什么是3D

3D是css3新增的属性，增强了css对元素控制的能力。3D相对于2D多出一个Z轴。Z轴可以理解为垂直于屏幕的方向，靠近屏幕的方向是正向，远离与屏幕的方向是反向。

二、3D属性

1、transform-style 属性

指定嵌套元素如何在3D空间中呈现。属性值有 flat 和 preserve-3d。

flat为默认值。

preserve-3d表示所有子元素都在3D空间中呈现。所以此属性是添加在父元素身上。

2、3D位移

位移主要包括translateZ()和translate3d()。translate3d()使一个元素在三维空间中运动。

语法translate3d(tx,ty.ty)

tx:：代表横向坐标方向移动。

ty：代表纵向坐标方向移动。

tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

translateZ(t) 指的是Z轴的向量长度。

3、3D旋转

rotateX()：指定 一个元素围绕X轴旋转，旋转的量被定义为指定的角度。如果为正值绕X轴顺时针旋转，如果为负值绕X轴逆时针旋转。

,rotateY()：指定 一个元素围绕Y轴旋转，旋转的量被定义为指定的角度。如果为正值绕Y轴顺时针旋转，如果为负值Y轴逆时针旋转。

rotateZ()：指定 一个元素围绕Z轴旋转，旋转的量被定义为指定的角度。如果为正值绕Z轴顺时针旋转，如果为负值Z轴逆时针旋转。

旋转单位为 deg

4、3D缩放

CSS3中的3D缩放主要包括scaleZ()。

scaleY(),scaleX()用法与2D用法一致。

5、深景

属性值：perspective:value;(加在父元素上)

生活中看物体都会有近大远小的效果。这就是3D和2D存在区别的地方。value值越大近大远小的效果就会更加明显。

三、纯css实现【正方体的书写】

CSS部分：

*{

margin: 0;

padding: 0;

}

ul{

width: 200px;

height: 200px;

/*border: 1px solid;*/

margin: 100px auto;

transform-style: preserve-3d;

transform: rotateX(0deg) rotateY(0deg);

position: relative;

animation: ro 3s infinite linear;

}

ul li{

width: 200px;

height: 200px;

text-align: center;

line-height: 200px;

position: absolute;

list-style: none;

}

ul li:nth-child(1){

background: red;

transform: rotateX(90deg) translateZ(100px);

}

ul li:nth-child(2){

background: yellow;

transform: rotateX(180deg) translateZ(100px);

}

ul li:nth-child(3){

background: pink;

transform: rotateX(270deg) translateZ(100px);

}

ul li:nth-child(4){

background: plum;

transform: rotateX(360deg) translateZ(100px);

}

ul li:nth-child(5){

background: greenyellow;

transform: translateX(-100px) rotateY(90deg) ;

}

ul li:nth-child(6){

background: blue;

transform: translateX(100px) rotateY(90deg) ;

}

@keyframes ro{

from{transform: rotateX(-20deg) rotateY(0deg);}

to{transform: rotateX(-20deg) rotateY(360deg);}

}

HTML部分：

• *6