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一半宽度,再旋转可以拼出其他面.其他立方体方法如此