js滑鼠拖動立方體3D運動效果
分享一段程式碼例項,它實現了滑鼠拖動立方體進行3D運動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width: 200px; height: 200px; margin: 200px auto; background: #ccc; position: relative; transform: perspective(800px) rotateY(-60deg) rotateX(45deg); transform-style: preserve-3d; } #box div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; -webkit-box-shadow: 0 0 100px #5fbcff; opacity: 0.8; } .front { transform: translateZ(100px); background: #f00; } .back { transform: translateZ(-100px); background: #20ab4f; } .top { transform: translateY(-100px) rotateX(90deg); background: #ff7800; } .bottom { transform: translateY(100px) rotateX(-90deg); background: #00f6ff; } .left { transform: translateX(-100px) rotateY(90deg); background: #0084ff; } .right { transform: translateX(100px) rotateY(-90deg); background: #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; } } } </script> </head> <body> <div id="box"> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容參閱相關閱讀。
相關閱讀:
(1).transform可以參閱CSS3 transform一章節。
(2).perspective()可以參閱CSS3 perspective一章節。
(3).transform-style可以參閱CSS3 transform-style一章節。
(4).background-size可以參閱background-size一章節。
(5).box-shadow可以參閱CSS3 box-shadow一章節。
(6).document.querySelector()可以參閱document.querySelector()一章節。
(7).onmousedown事件可以參閱javascript mousedown事件一章節。
(8).onmousemove事件可以參閱javascript mousemove事件一章節。
(9).clientX可以參閱javascript event.clientX一章節。
相關文章
- 可以拖動立方體3D效果程式碼例項3D
- javascript div元素滑鼠拖動效果詳解JavaScript
- three.js 3D立方體效果程式碼例項JS3D
- js滑鼠移動實現圖片立體滾動效果JS
- CSS3多面體3D運動效果CSSS33D
- three.js實現的3D球狀拖動旋轉效果JS3D
- 滑鼠按住拖動具有半透明效果的程式碼例項
- jquery 感應滑鼠移動的文字3d滾動效果jQuery3D
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- js拖動實現左右圖片對比效果JS
- canvas實現的按住滑鼠拖動能夠繪製文字效果Canvas
- js隨機運動小球效果JS隨機
- js 根據滑鼠拖動(或手機長按)旋轉JS
- JavaScript拖動滑鼠繪製矩形方框JavaScript
- JavaScript滑鼠拖動調整div大小JavaScript
- canvas 按住滑鼠拖動 繪製文字Canvas
- CSS3立方體3D旋轉效果CSSS33D
- js實現的div拖動效果例項程式碼JS
- JavaScript 限定範圍拖動效果JavaScript
- HTML元素拖動JSHTMLJS
- JavaScript左右拖動滑動的按鈕效果JavaScript
- jQuery滑鼠拖動調整數字大小jQuery
- 移動端觸屏拖動頁面滾動效果
- js物件導向封裝拖動效果程式碼例項JS物件封裝
- js滑鼠懸浮字串實現字串跳動效果JS字串
- JavaScript表格tr行左右拖動效果JavaScript
- jquery div層拖動效果封裝jQuery封裝
- [VB.net][WinForm]Panel控制元件移動\滑鼠拖動ORM控制元件
- vueusejs實現拖動VueJS
- Jquery實現滑鼠拖動改變div高度jQuery
- css3實現的立方體3D旋轉效果CSSS33D
- JS實現拖動div層移動JS
- win10滑鼠拖不動怎麼處理_win10滑鼠無法拖動檔案的解決方法Win10
- C#實現窗體拖動、不允許窗體拖動、任意控制元件執行時拖動C#控制元件
- 拖動滾動條實現內容自動載入效果
- 移動端div塊拖動效果程式碼例項
- jQuerydiv元素拖動效果程式碼例項jQuery
- flutter上拉抽屜效果,flutter拖動抽屜效果Flutter