本文通過(guò)原生JS,點(diǎn)擊事件,鼠標(biāo)按下、鼠標(biāo)抬起和鼠標(biāo)移動(dòng)事件,實(shí)現(xiàn)3D立方體的拖動(dòng)旋轉(zhuǎn),并將旋轉(zhuǎn)角度實(shí)時(shí)的反應(yīng)至界面上顯示。
實(shí)現(xiàn)原理:通過(guò)獲取鼠標(biāo)點(diǎn)擊屏幕時(shí)的坐標(biāo)和鼠標(biāo)移動(dòng)時(shí)的坐標(biāo),來(lái)獲得鼠標(biāo)在X軸、Y軸移動(dòng)的距離,將距離實(shí)時(shí)賦值給transform屬性。
從而通過(guò)改變transform:rotate屬性值來(lái)達(dá)到3D立方體旋轉(zhuǎn)的效果:
HTML代碼塊:
新聞熱點(diǎn)
疑難解答
圖片精選