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

CSS3学习笔记之立体盒子是纯CSS3实现的动画特效，当你的鼠标移到盒子的边上他会打开盒子让你看到里面，效果真棒，因为IE9以下版本暂时不支持CSS3，所以网友们在看效果的时候请不要用IE浏览器来运行，为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。

主要用了CSS3的以下属性：

1、transform

2、transition

3、background

样式代码如下：

#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;  }

效果如下：


在线演示和下载