用html5做立体盒子,css3立体盒子特效

* {

margin:0;

padding:0;

}

body {

color:#333;

font-family:Georgia,"Times New Roman",Times serif;

text-align:center;

}

input {

display:none;

}

label {

margin-top:150px;

margin-left:50px;

display:inline-block;

width:80px;

height:30px;

border:1px solid #000;

border-radius:10px;

line-height:30px;

}

.btn {

margin:100px auto;

}

.all {

perspective:1000px;

width:250px;

height:250px;

text-align:center;

display:inline-block;

}

.box {

display:inline-block;

text-align:center;

position:relative;

width:100%;

height:100%;

transition:all 1s;

transform-style:preserve-3d;

transform:rotateX(-20deg) rotateY(20deg);

}

.face {

overflow:hidden;

position:absolute;

border:1px solid #666;

background:#fff;

box-shadow:inset 0 0 50px rgba(0,0,0,0.4);

color:#333;

line-height:250px;

opacity:0.8;

}

.box_font {

width:250px;

height:250px;

transform:translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-6.png);

background-size:100% 100%;

}

.box_top {

width:250px;

height:250px;

transform:rotateX(90deg) translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-5.png);

background-size:100% 100%;

}

.box_bottom {

width:250px;

height:250px;

transform:rotateX(-90deg) translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-1.png);

background-size:100% 100%;

}

.box_left {

width:250px;

height:250px;

transform:rotateY(-90deg) translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-2.png);

background-size:100% 100%

}

.box_right {

width:250px;

height:250px;

transform:rotateY(90deg) translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-3.png);

background-size:100% 100%

}

.box_back {

width:250px;

height:250px;

transform:rotateY(180deg) translate3d(0,0,125px);

background:url(http://www.jq22.com/img/cs/500x500-4.png);

background-size:100% 100%

}

#bottom:checked ~ .all .box {

transform:rotateX(90deg);

}

#top:checked ~ .all .box {

transform:rotateX(-90deg);

}

#left:checked ~ .all .box {

transform:rotateY(90deg);

}

#right:checked ~ .all .box {

transform:rotateY(-90deg);

}

#back:checked ~ .all .box {

transform:rotateY(180deg);

}

#bottom,#top,#left,#right,#back:hover {

background:#ccc;

}