- 网友Adam、分享的CSS3学习笔记之立体盒子，带动画效果的例子，鼠标放在例子的任一面上，都可打开盒子，对CSS3制作动画效果有很高的参考价值。测试代码请远离IE。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网友Adam、分享CSS3学习笔记之立体盒子</title><style>* { margin:0; padding:0; list-style:none; }body { background:#ccc; }#box_before:before,#box_right:before{ background:rgba(0,0,0,0); display:block; height:240px; width:240px; content:" "; }#stage {height: 300px; width:300px; margin: 0 auto; position:relative; top:60px; left:-100px;}#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;}</style></head><body><h1 style="margin:0 auto; margin-top:30px; width:800px; text-align:center; text-shadow:1px 1px 0px #eee; color:rgba( 0,0,0,.8 );"> Adam CSS3 立体盒子（ 鼠标划过盒子试试 ） </h1><dl id="stage"><dd id="box_back"></dd><dd id="box_bottom"></dd><dd id="box_left"></dd><dd id="box_before"></dd><dd id="box_top"></dd><dd id="box_right"></dd></dl></body></html>
相关内容推荐