<!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>無標(biāo)題文檔</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>
添加回答
舉報
0/150
提交
取消