Html
    Css
    Js

    
                        
 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调用版本:2.1.4
 立即下载

jquery立方体

用jquery写的一个立方体效果.主要思想是用到css的一个3d效果,以及空间的立体动画平移,用c3可以达到同样的效果开始div在同一平面上,通过开启preserve-3d,使div可以在空间内旋转平移,在实现过程中脑海可以想象,只需要将两个面平移div一半宽度,再旋转可以拼出其他面.其他立方体方法如此

0