HTML5,CSS3 旋转立方体

//注:这是听邢帅教育免费课程所写

效果如下:

主要html代码:

<div class="main">

<div class="box">

//大的立方体

<div class="front"><img src="imgs/img.jpg" class="pic"/></div>

<div class="back"><img src="imgs/img.jpg" class="pic"/></div>

<div class="left"><img src="imgs/img.jpg" class="pic"/></div>

<div class="right"><img src="imgs/img.jpg" class="pic"/></div>

<div class="top"><img src="imgs/img.jpg" class="pic"/></div>

<div class="bottom"><img src="imgs/img.jpg" class="pic"/></div>

//小的立方体

<span class="s_front"><img src="imgs/img.jpg" class="s_pic"/></span>

<span class="s_back"><img src="imgs/img.jpg" class="s_pic"/></span>

<span class="s_left"><img src="imgs/img.jpg" class="s_pic"/></span>

<span class="s_right"><img src="imgs/img.jpg" class="s_pic"/></span>

<span class="s_top"><img src="imgs/img.jpg" class="s_pic"/></span>

<span class="s_bottom"><img src="imgs/img.jpg" class="s_pic"/></span>

</div>

</div>

主要css代码:

html{

background: url(imgs/bg.jpg) no-repeat;

height: 100%;

/*铺满整个背景*/

background-size: 100% 100%;

}

.main{

width: 360px;

height: 360px;

margin:200px auto;

position: relative;

}

.box{

width: 360px;

height: 360px;

margin:100px auto;

position: relative;

transform-style: preserve-3d;

transform:rotate(30deg,-20deg);

animation:rou 20s linear infinite;

}

@keyframes rou{

from{

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

}

to{

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

}

}

.box div{

position: absolute;

width: 360px;

height: 360px;

background: #fff;

opacity: 0.8;

/*动画的过渡效果*/

transition:all 0.7s;

}

.pic{

width: 100%;

height: 100%;

}

.front{

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

}

.back{

transform: translateZ(0px) translateZ(-180px);

}

.left{

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

}

.right{

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

}

.top{

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

}

.bottom{

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

}

/*设置里面立方体的样式*/

.box span{

display: block;

width: 144px;

height: 144px;

position: absolute;

top:108px;

left:108px;

}

.s_pic{

width:100%;

height: 100%;

}

.s_front{

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

}

.s_back{

transform: tranlateZ(-72px) translateZ(-180px);

}

.s_left{

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

}

.s_right{

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

}

.s_top{

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

}

.s_bottom{

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

}

.box:hover .front{

transform:rotateY(0deg) translateZ(-300px);

}

.box:hover .back{

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

}

.box:hover .left{

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

}

.box:hover .right{

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

}

.box:hover .top{

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

}

.box:hover .bottom{

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

}