整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何實現前端CSS-3D交互，跟隨鼠標3D旋轉。
這期視頻分享一個三D卡片的交互效果。圖片會在鼠標滑入后跟隨鼠標進行三D旋轉。
要讓卡片進行3D旋轉，需要使用騰騰、rotate以及透視視劇perspective卡片。3D旋轉效果只需要rotatex和rotatey的旋轉就可以了。
通常情況下透視數據p2x的取值為五百px左右，這里設置為五百px。然后修改旋轉xy的詞，發現靜態效果可以呈現出來。如何跟隨鼠標？就需要監聽鼠標滑入、滑動、滑出事件。
首先需要給滑動設置一個確定旋轉范圍，然后在鼠標移動監聽的時候進行計算。計算公式非常常見，就不再贅述。
最后把值復制給旋轉的xy，通過css變量的方式進行復制。然后在鼠標滑出的時候再把旋轉的xy復制為零，就實現了這個功能。
插入滑出的時候沒有過渡效果，比較生硬。可以加上過渡效果，但是因為旋轉的xy值修改的頻率太高了，過渡效果會有延遲。而且d bug看日志的時候還會卡的不行。也可以僅在鼠標滑出的時候增加過渡效果，這樣在鼠標離開的時候就有過渡效果了。
但是鼠標滑入的時候還是會比較生硬，因為會接著跟鼠標旋轉，所以體驗還好。如果有小伙伴知道在反復去掉過渡效果的情況下滑入，如何處理過渡效果，歡迎在評論區進行討論。那么這期視頻就到這里結束了，喜歡的小伙伴可以幫忙點點贊，感謝大家的觀看，拜拜。
圖1
圖2
圖3
圖1
圖2
圖3
源碼完整，需要的朋友可以下載學習（圖4）
圖4
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
