css3 圆柱立体盒子,CSS3学习笔记之立体盒子(带动画效果)

#box_before,#box_back,#box_left,#box_right,#box_top,#box_bottom {

height:240px;

width:240px;

text-align:center;

font-weight:bolder;

color:#fff;

font-size:60px;

position:absolute;

-webkit-transform-origin:right top;

-moz-transform-origin:right top;

-ms-transform-origin:right top;

-o-transform-origin:right top;

transform-origin:right top;

box-shadow:0 0 2px rgba(50,50,50,0.1);

}

#box_back {

left:240px;

top:88px;

background:-webkit-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-moz-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-ms-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-o-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

-webkit-transform:skew( 0deg,20deg );

-moz-transform:skew( 0deg,20deg );

-ms-transform:skew( 0deg,20deg );

-o-transform:skew( 0deg,20deg );

transform:skew( 0deg,20deg );

}

#box_left {

background:-webkit-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-moz-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-ms-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:-o-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

background:linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) );

-webkit-transform:skew( 0deg,-20deg );

-moz-transform:skew( 0deg,-20deg );

-ms-transform:skew( 0deg,-20deg );

-o-transform:skew( 0deg,-20deg );

transform:skew( 0deg,-20deg );

}

#box_bottom {

width:218px;

top:240px;

left:19px;

background:#b9b9b9;

-webkit-transform:rotate( -50deg ) skew( 20deg,30deg );

-moz-transform:rotate( -50deg ) skew( 20deg,30deg );

-ms-transform:rotate( -50deg ) skew( 20deg,30deg );

-o-transform:rotate( -50deg ) skew( 20deg,30deg );

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

}

#box_before {

left:0;

top:174px;

background:rgba(232,232,232,.7);

-webkit-transform:skew( 0deg,20deg );

-moz-transform:skew( 0deg,20deg );

-ms-transform:skew( 0deg,20deg );

-o-transform:skew( 0deg,20deg );

transform:skew( 0deg,20deg );

-webkit-transition:all 300ms ease;

-moz-transition:all 300ms ease;

-ms-transition:all 300ms ease;

-o-transition:all 300ms ease;

transition:all 300ms ease;

}

#box_before:hover {

-webkit-transform:skew( 0deg,0deg );

-moz-transform:skew( 0deg,0deg );

-ms-transform:skew( 0deg,0deg );

-o-transform:skew( 0deg,0deg );

transform:skew( 0deg,0deg );

}

#box_right {

left:240px;

top:87px;

background:rgba(232,232,232,.7);

-webkit-transform:skew( 0deg,-20deg );

-moz-transform:skew( 0deg,-20deg );

-ms-transform:skew( 0deg,-20deg );

-o-transform:skew( 0deg,-20deg );

transform:skew( 0deg,-20deg );

-webkit-transition:all 300ms ease;

-moz-transition:all 300ms ease;

-ms-transition:all 300ms ease;

-o-transition:all 300ms ease;

transition:all 300ms ease;

}

#box_right:hover {

-webkit-transform-origin:left;

-moz-transform-origin:left;

-ms-transform-origin:left;

-o-transform-origin:left;

transform-origin:left;

-webkit-transform:skew( 0deg,-20deg );

-moz-transform:skew( 0deg,-20deg );

-ms-transform:skew( 0deg,-20deg );

-o-transform:skew( 0deg,-20deg );

transform:skew( 0deg,-20deg );

}

#box_top {

width:220px;

top:-0;

left:19px;

background:rgba(216,216,216,.95);

-webkit-transform:rotate( -50deg ) skew( 20deg,30deg );

-moz-transform:rotate( -50deg ) skew( 20deg,30deg );

-ms-transform:rotate( -50deg ) skew( 20deg,30deg );

-o-transform:rotate( -50deg ) skew( 20deg,30deg );

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

-webkit-transition:all 300ms ease;

-moz-transition:all 300ms ease;

-ms-transition:all 300ms ease;

-o-transition:all 300ms ease;

transition:all 300ms ease;

}

#box_top:hover {

top:-80px;

}

#box_before:before,#box_right:before {

-webkit-transform:translate(0px,242px);

-moz-transform:translate(0px,242px);

-ms-transform:translate(0px,242px);

-o-transform:translate(0px,242px);

transform:translate(0px,242px);

background:-webkit-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));

background:-moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));

background:-ms-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));

background:-o-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));

background:linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));

}

#box_before:before {

width:240px;

left:1px;

}