在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

 

　　<divclass="box">

 

　　<divclass="one"></div>

 

　　<divclass="two"></div>

 

　　<divclass="three"></div>

 

　　<divclass="four"></div>

 

　　<divclass="five"></div>

 

　　<divclass="six"></div>

 

　　</div>

 

　　然后设置box的CSS属性，以及将它设置为3D元素。在这里需要注意要设置定位，目的是让六个元素可叠加在一起

 

　　.box{

 

　　position:relative;

 

　　width:200px;

 

　　height:200px;

 

　　transform-style:preserve-3d;/*创造3D空间*/

 

　　-webkit-transform-style:preserve-3d;

 

　　transition:all5slinear;

 

　　}

 

　　接下来就要设置立方体的六个面

 

　　.boxdiv{

 

　　width:200px;

 

　　height:200px;

 

　　position:absolute;

 

　　left:0;

 

　　top:0;

 

　　transform-style:preserve-3d;

 

　　-webkit-transform-style:preserve-3d;

 

　　border:1pxsolid#46B8DA;

 

　　opacity:0.5;

 

　　}

 

　　六个面的公共部分设置完了，接下来就要设置这六个面的3d效果，我们可以通过transform属性来设置3D变化，它可以允许我们对元素进行旋转，移动，倾斜等

 

　　

 

　　.one{

 

　　transform:rotateY(0deg)translateZ(100px);

 

　　background-color:rgb(255,118,19);

 

　　}

 

　　.two{

 

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

 

　　background-color:rgb(231,78,72);

 

　　}

 

　　.three{

 

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

 

　　background-color:rgb(75,165,165);

 

　　}

 

　　.four{

 

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

 

　　background-color:rgb(129,182,62);

 

　　}

 

　　.five{

 

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

 

　　background-color:rgb(255,118,19);

 

　　}

 

　　.six{

 

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

 

　　background-color:rgb(244,208,114);

 

　　}

 

　　这样我们的立方体就做好了，当鼠标移上去的时候就会发生旋转

 

　　.box:hover{

 

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

 

　　-webkit-transform:rotateX(360deg)rotateY(360deg);

 

　　}






本文转载自中文网