效果图
实例代码如下:
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> javascript #box {width:200px; height:200px; margin:200px auto;背景:#ccc;位置:相対;変換:Perspective(800px)Rotatey(-60Deg)Rotatex(45Deg); Transform-Style:preserve-3d;} #box Div {width:100%; height:100%;位置:絶対;上:0;左:0;バックグラウンドサイズ:カバー; -webkit-box-shadow:0 0 100px#5fbcff;不透明:0.8;} .front {transform:translatez(100px);背景:#f00;} .back {transform:translatez(-100px);背景:#20ab4f;} .top {transform:translatey(-100px)rotatex(90deg);背景:#ff7800;} .bottom {transform:translatey(100px)rotatex(-90deg);背景:#00f6ff;} .Left {transform:translatex(-100px)rotatey(90deg);背景:#0084ff;} .right {transform:translatex(100px)rotatey(-90deg);背景:#b400ff;} </style> <script> window.onload = function(){var odiv = document.queryselector( "#box"); var y = -60; var x = 45; odiv.onmousedown = function(ev){var ev = ev || event; var disx = ev.clientx-y; var disy = ev.clienty-x; document.onmousemove = function(ev){var ev = ev || event; y = ev.clienty-disy; x = ev.clientx-disx; odiv.style.transform = 'perspective(800px)rotatex('+x+'deg)rotatey('+y+'deg)'; } document.onmouseup = function(){document.onmouseup = null; document.onmousemove = null; odiv.releasecapture && odiv.releasecapture(); } odiv.setcapture && odiv.setcapture()return false; }} </scrip> </head> <body> <div id = "box"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </body> </html>以上就是这篇文章的全部内容、怎么样?效果很好吧、感兴趣的朋友们自己运行看看效果、希望这篇文章对大家能有一定的帮助。