首页 > 代码库 > CSS3之设计动态立体盒子
CSS3之设计动态立体盒子
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>
CSS3之设计动态立体盒子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。