html 透视效果,CSS3实现透视感效果

CSS3实现透视感效果_网页代码站(www.webdm.cn)

.container {

width: 200px;

height: 200px;

border: 1px solid #CCC;

margin: 0 auto 40px;

}

.box {

width: 100%;

height: 100%;

}

#red .box {

background-color: red;

-webkit-transform: perspective( 600px ) rotateY( 45deg );

-moz-transform: perspective( 600px ) rotateY( 45deg );

-o-transform: perspective( 600px ) rotateY( 45deg );

transform: perspective( 600px ) rotateY( 45deg );

}

#blue {

-webkit-perspective: 600px;

-moz-perspective: 600px;

-o-perspective: 600px;

perspective: 600px;

}

#blue .box {

background-color: blue;

-webkit-transform: rotateY( 45deg );

-moz-transform: rotateY( 45deg );

-o-transform: rotateY( 45deg );

transform: rotateY( 45deg );

}

#red .box {

background-color: red;

transform: perspective( 600px ) rotateY( 45deg );

}

#blue {

perspective: 600px;

}

#blue .box {

background-color: blue;

transform: rotateY( 45deg );

}

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！