了解一些css3动画知识，可以实现3d效果。原始连接状态1首先创建一个立方体容器element.box{position:relative;宽度：100px；高度：100px；transform-style:preserve-3d;}transform-style属性的定义是指定嵌入对象在3d空间中如何呈现设置元素flat是默认的平面显示，preserve-3d为子元素保留3d位置，即该属性在需要显示3d效果元素的父元素上设置立方体的六个面，创建6个div元素并设置相同的绝对定位显示，为了效果明显。每个面的透明度为0.5。.boxdiv{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；不透明度：.5；了解转换的中心点在哪里。状态2为了显示立方体的顶部、底部和侧面，需要对4个面进行绕X、Y轴的直角变换。boxdiv:nth-of-type(1),。boxdiv:nth-of-type(2){transform:rotatex(90deg);}.boxdiv:nth-of-type(3),.boxdiv:nth-of-type(4){transform:rotatey(90deg);}你可以给容器增加一定的角度。box{transform:rotatex(45deg)rotatey(45deg);}状态3的下一步是打开6个面，并将它们构建成一个立方体。在每个人脸变换的基础上添加/将宽高减半的Z轴位置变换.boxdiv:nth-of-type(1){transform:rotatex(90deg)translatez(50px);}.boxdiv:nth-of-type(2){transform:rotatex(90deg)translatez(-50px);}.boxdiv:nth-of-type(3){transform:rotatey(90deg)translatez(50px);}.boxdiv:nth-of-type(4){变换：rotatey(90deg)translatez(-50px);}.boxdiv:nth-of-type(5){transform:translatez(50px);}.boxdiv:nth-of-type(6){变换：translatez(-50px);}这样一个3D立方体就搭建好了^_^
