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

效果如下：


在線演示和下載