网友Adam‘分享CSS3学习笔记之立体盒子

作者：管理员

发布时间：2012/12/18 23:45:03

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=198

文章由【网友Adam‘】提供

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

HTML代码如下：

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

效果如下：

在线演示

在线下载

关键字：css3 css3学习笔记 css3圆角 css3渐变 css3选择器 立体盒子