如何通过CSS3实现旋转立方体

如今随着CSS3的不断成熟和发展，我们可以利用CSS3变换样式，translateZ，rotateX，rotateY，rotateZ，径向渐变，线性渐变，透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值，希望对大家有所帮助

【推荐课程：CSS3教程】

在立方体内部是六个侧面，它们被定义为单独的图形元素，每个元素具有单独的“后”，“顶”，“底”，“左”，“右”和“前”。所以首先我们要创建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);

}