<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> *{padding:0;margin:0} body{ background:#bbb; padding:150px; } .stageBox{ -webkit-perspective: 800px;/*景深*/ } .container{ width:100px; height:100px; opacity:.8; position:relative; -webkit-transform-style:preserve-3d;/*谷歌*/ -moz-transform-style:preserve-3d;/*火狐*/ -ms-transform-style:preserve-3d;/*IE9*/ transform-style:preserve-3d; } .container div{ width:100%; height:100%; color:#fff; text-align:center; position:absolute; font-size:36px; font-weight:bold; line-height:100px; } .container div:nth-child(1){/*顶*/ top:-100px; left:0; background:#93C; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); } .container div:nth-child(2){/*左*/ top:0; left:-100px; background:#FF0; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); } .container div:nth-child(3){/*底*/ top:100px; left:0; background:#3CF; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); } .container div:nth-child(4){/*右*/ top:0; left:100px; background:#6FC; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); } .container div:nth-child(5){/*前*/ top:0; left:0; background:#00F; } .container div:nth-child(6){/*后*/ top:0; left:0; background:#F0F; } </style></head><body> <div class="stageBox"> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div></body></html>
- 1 回答
- 0 关注
- 1740 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消