元素跟隨鼠標(biāo)旋轉(zhuǎn)，未待完續(xù)。。。。

xiaochao 發(fā)布于2019-08-02 11:54 / 520人閱讀

摘要：這主要是沿著軸進(jìn)行旋轉(zhuǎn)，顧名思義就是橫向不動(dòng)，肉眼看見的圖形應(yīng)該是上下翻轉(zhuǎn)的效果定義沿著軸的旋轉(zhuǎn)。

本節(jié)主要講的是元素跟隨鼠標(biāo)旋轉(zhuǎn)主要是用到了原生js更改css的transform屬性，這個(gè)屬性下有很多方法，下面就只講關(guān)于本節(jié)內(nèi)容的幾種方法，其他的可以私下自己去看一看

translate(x,y) 轉(zhuǎn)換2D

translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）
translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）
translateY(Y)僅垂直方向移動(dòng)（y軸移動(dòng)）
效果：

鏈接描述

rotate(angle) 定義2D旋轉(zhuǎn)，旋轉(zhuǎn)角度在參數(shù)中定義

通過指定rotate內(nèi)設(shè)置角度參數(shù)對(duì)元素進(jìn)行一個(gè)2D的旋轉(zhuǎn)，設(shè)置正數(shù)元素則順時(shí)針旋轉(zhuǎn)參數(shù)內(nèi)的角度，設(shè)置負(fù)數(shù)則逆時(shí)針旋轉(zhuǎn)參數(shù)內(nèi)的角度
transform-origin可以定義旋轉(zhuǎn)的原點(diǎn)，不設(shè)置的話會(huì)按中心點(diǎn)進(jìn)行旋轉(zhuǎn)，這個(gè)屬性的參數(shù)也分為 x軸 y軸 z軸（偏移量）
效果：

鏈接描述

rotateX(angle) 定義沿著 x 軸的 3D 旋轉(zhuǎn)。

 這主要是沿著X軸進(jìn)行旋轉(zhuǎn)，顧名思義就是橫向不動(dòng)，肉眼看見的圖形應(yīng)該是上下翻轉(zhuǎn)的效果

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

 這主要是沿著Y軸進(jìn)行旋轉(zhuǎn)，顧名思義就是垂直不動(dòng)，肉眼看見的圖形應(yīng)該是左右翻轉(zhuǎn)的效果，盜個(gè)圖吧，作者看見別怪！

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

 Z軸我個(gè)人的理解就是按照你設(shè)置的旋轉(zhuǎn)原點(diǎn)，繞圈旋轉(zhuǎn)
 
 下面就是x，y，z 軸的圖解

鏈接描述

另外還有最重要的就是transform的矩陣matrix(n,n,n,n,n,n)里面的六個(gè)值分別代表不同的屬性，這里就不說它，沒啥好說的自己下去看看吧！！！

利用上一篇文章所講的坐標(biāo)來計(jì)算鼠標(biāo)移動(dòng)的時(shí)候計(jì)算角度

獲取旋轉(zhuǎn)元素的中心點(diǎn)

   設(shè)置默認(rèn)旋轉(zhuǎn)的中心X原點(diǎn)以及Y的中心原點(diǎn)，根據(jù)元素的位置計(jì)算，利用元素的width + 元素的偏移量 計(jì)算 旋轉(zhuǎn)原點(diǎn)，鼠標(biāo)點(diǎn)擊
   時(shí)獲取
   centerX = n.offsetLeft + n.offsetWidth / 2
   centerY = n.offsetTop + n.offsetHeight / 2

這里會(huì)用到計(jì)算弧度Math.atan2

獲取旋轉(zhuǎn)的角度centerx

   static angle (centerx, centery, endx, endy) {
       // 鼠標(biāo)移動(dòng)獲取鼠標(biāo)移動(dòng)的e.client - 鼠標(biāo)點(diǎn)擊時(shí)的client
       var diff_x = endx - centerx, // 拿到計(jì)算弧度的差值
           diff_y = endy - centery
       // Math.atan2利用x，y坐標(biāo)計(jì)算角度
       // 360 * Math.atan2(diff_y, diff_x) 映射到360度
       // 一個(gè)完整的圓的弧度是2π，所以：2π rad = 360°
       // / (2 * Math.PI) 轉(zhuǎn)換成角度
       var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI)
       // 其實(shí)在這里就分逆時(shí)針和順時(shí)針旋轉(zhuǎn)了，(360 + -c)逆時(shí)針
       // 如果為-90 = 360 + -90 ，如果為-80 = -80 + 90
       c = c <= -90 ? (360 + c) : c
       // 補(bǔ)上-90度的差值
       return c + 90
   }

例如：

    centerx：40，centery：30 取的都是中心點(diǎn)的值
    endx: 80, endy: 60

GPU云服務(wù)器云服務(wù)器未待完續(xù) jquery鼠標(biāo)跟隨 DIV跟隨鼠標(biāo)移動(dòng) js中鼠標(biāo)跟隨

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53202.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xiaochao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

卷積神經(jīng)網(wǎng)絡(luò)

閱讀 756·2023-04-26 01:30
#黑五#edgeNAT：全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付48元

閱讀 3307·2021-11-24 10:32
C# 從 UTF-8 流中讀取字符串的正確方法

閱讀 2193·2021-11-22 14:56
聊聊并發(fā)（五）——線程池

閱讀 1988·2021-11-18 10:07
【每日一包0004】array-slice

閱讀 561·2019-08-29 17:14
開發(fā)一個(gè) Parcel-vue 腳手架工具

閱讀 632·2019-08-26 12:21
js監(jiān)聽窗口消失

閱讀 3111·2019-08-26 10:55
[譯]帶你理解 Async/await

閱讀 2947·2019-08-23 18:09

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

元素跟隨鼠標(biāo)旋轉(zhuǎn)，未待完續(xù)。。。。

相關(guān)文章