效果图
实例代码如下：
< 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>以上就是这篇文章的全部内容、怎么样？效果很好吧、感兴趣的朋友们自己运行看看效果、希望这篇文章对大家能有一定的帮助。