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

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

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

#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,0.1);}#Box_back {	left:240px;	top:88px;	background:-webkit-linear-gradIEnt( top,rgba(255,255,0.1),rgba(0,0.1) );	background:-moz-linear-gradIEnt( top,0.1) );	background:-ms-linear-gradIEnt( top,0.1) );	background:-o-linear-gradIEnt( top,0.1) );	background:linear-gradIEnt( top,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,-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,.7);	-webkit-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,-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 );}#Box_top {	wIDth:220px;	top:-0;	left:19px;	background:rgba(216,216,.95);	-webkit-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,0.2),0.3) 2%,0) 50%,0));	background:-moz-linear-gradIEnt(top,0));	background:-ms-linear-gradIEnt(top,0));	background:-o-linear-gradIEnt(top,0));	background:linear-gradIEnt(top,0));}#Box_before:before {	wIDth:240px;	left:1px;}

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的CSS3学习笔记之立体盒子(带动画效果)全部内容，希望文章能够帮你解决CSS3学习笔记之立体盒子(带动画效果)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。