CSS3设计3D效果图
使用到CSS3中的变形、缩放、倾斜。
只写了兼容Gecto的。发张图片鼓励自己
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .cube { position:fixed; left:50%; top:12px; } .cube p { line-height:144px; font-size:12px; } .cube h2 { font-weight:bold; } .cube.one { top:200px; left:50%; margin-left:-200px; } .topFace, .leftFace, .rightFace div /*统一三面的尺寸*/ { width:272px; height:262px; padding:10px; } .topFace, .leftFace, rightFace /*统一三立面绝对定位*/ { position:absolute; } .cube:hover .topFace, .cube:hover .leftFace, .cube:hover .rightFace { background:#ffc; } .cube:hover .topFace:hover, .cube:hover .leftFace:hover, .cube:hover .rightFace:hover { background:#ffa; } .leftFace /*变形左边*/ { -moz-transform:skew(0deg,30deg) scale(0.95,0.95); background:#ccc; top:85px; left:-60px; } .rightFace { -moz-transform:skew(0deg,-30deg) scale(1,0.95); /*变形正面*/ background:#ddd; position:absolute; left:222px; top:80px; } .topFace div /*变形顶面*/ { -moz-transform:skew(0deg,-30deg) scale(1,1.16); background:#eee; font-size:0.862em; } .topFace { -moz-transform:rotate(60deg); top:-150px; left:115px; } </style> </head> <body> <div class="cube one"> <div class="topFace"> <div> <h2>顶面</h2> <p><img src="images/oversea01.jpg"></p> </div> </div> <div class="leftFace"> <div> <h2>左面</h2> <p><img src="images/oversea02.jpg"></p> </div> </div> <div class="rightFace"> <div> <h2>正面</h2> <p><img src="images/oversea03.jpg"></p> </div> </div> </div> </body> </html>