html,body { height:100%; background-color:#000000; perspective:1000px; /*3d视距*/ } .container { width:300px; height:300px; position:absolute; left:calc(50% - 150px); /*calc计算属性*/ top:calc(50% - 150px); transform-style:preserve-3d; /*开启3D*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; } .container div { width:300px; height:300px; border-radius:20px; position:absolute; box-shadow:0px 0px 60px white; opacity:0.8; background-size:contain; }
用jquery写的一个立方体效果.主要思想是用到css的一个3d效果,以及空间的立体动画平移,用c3可以达到同样的效果开始div在同一平面上,通过开启preserve-3d,使div可以在空间内旋转平移,在实现过程中脑海可以想象,只需要将两个面平移div一半宽度,再旋转可以拼出其他面.其他立方体方法如此