摘要：第一部分是正方體部分，第二部分是中的路徑動畫了，第三部分則是交互旋轉。然后在立方體元素上添加鼠標點擊事件事件，在回調函數中做處理內容。回調函數中先記錄下來鼠標點擊的位置。

我使用了jquery編寫交互的旋轉，因為初學所以不太承受，還請見諒。樣式我是寫stylus編碼，自動生成css。

先放上一張效果圖

我將其分成三部分。第一部分是正方體部分（SVG），第二部分是svg中的路徑動畫了（animateMotion + jQuery），第三部分則是交互旋轉（jQuery）。

做一個正方體

我的思路是用六塊svg正方形畫板通過css屬性旋轉和平移來構成正方體。

html代碼：

stylus代碼

html
    margin 0
    padding 0
    height 100%
    width 100%
    body
        height 100%
        width 100%
        .page
            .state
                height 300px
                width 300px
                position absolute
                top 50%
                left 50%
                transform translate(-50%,-50%)//修正位置
                .container
                    transform-style preserve-3d
                    position relative
                    height 300px
                    width 300px
                    transform rotateX(0deg) rotateY(0deg)
                    svg
                        position absolute
                        height 300px
                        width 300px
                        stroke-width 5px
                        stroke brown
                        fill transparent //填充用透明
                        .rect
                            height 300px
                            width 300px
                    .top
                        transform rotateX(90deg) translateZ(150px)
                    .bottom 
                        transform rotateX(-90deg) translateZ(150px)
                    .left
                        transform rotateY(-90deg) translateZ(150px)
                    .right
                        transform rotateY(90deg) translateZ(150px)
                    .front
                        transform rotateY(0deg) translateZ(150px)
                    .behind
                        transform rotateY(180deg) translateZ(150px)

通常有兩種方式來構建一個立方體
第一種：先平移再旋轉。優點是不許太強的空間構造能力，寫起來比較簡單。缺點就是：代碼數會多一些，需要在平移后設置旋轉基點。替換一下樣式就行。

.top 
    fill blue 
    transform-origin: bottom 
    transform translateY(-200px) rotateX(90deg)
.bottom 
    fill red 
    transform-origin:top 
    transform translateY(200px) rotateX(-90deg)
.left 
    fill green 
    transform-origin: right 
    transform translateX(-200px) rotateY(-90deg)
.right 
    fill black 
    transform-origin: left 
    transform translateX(200px) rotateY(90deg)
.front 
    fill grey
    transform translateZ()
.behind 
    fill pink 
    transform translateZ(-200px)

第二種：先旋轉再平移。這個的特點就是與上面的相反了。（我使用的是這種）
兩種生成立方體的原理看下圖
第一種

第二種

以上就是兩種構建立方體的方法大致原理了

路徑動畫我是通過在相鄰兩個面上一個動畫結束的位置和下一個動畫起始位置重合，
下一個動畫起始的延時設置為之前所有動畫的動畫時間，做到視覺認為路線是連接起來的。
先上代碼：

路徑動畫是有animateMotion元素做的所以可以不是直線，只是為了方便設計，我吧path路徑設計成了直線
有興趣的可以自己設計一下。
路徑是我用 Method Draw 畫的 editor.method.ac/

接下來就是重點的路徑控制了

$(document).ready(function () {
    const animate = document.getElementsByTagName("animateMotion");
    // 0 frontY 1 frontX 2 behindY 3 behindX 4 leftX 5 rightX 6 topY 7 bottomY
    var frontY = animate[0], frontX = animate[1],
        behindY = animate[2], behindX = animate[3],
        leftX = animate[4], rightX = animate[5],
        topY = animate[6], bottomY = animate[7];
    // Y面球體運動
    (() => {
        //先執行一次
        frontY.beginElement();
        setTimeout(() => {
            bottomY.beginElement();
        }, 3000);
        setTimeout(() => {
            behindY.beginElement();
        }, 6000);
        setTimeout(() => {
            topY.beginElement();
        }, 9000);
        // 循環執行動畫
        var time = setInterval(() => {
            frontY.beginElement();
            setTimeout(() => {
                bottomY.beginElement();
            }, 3000);
            setTimeout(() => {
                behindY.beginElement();
            }, 6000);
            setTimeout(() => {
                topY.beginElement();
            }, 9000);
        }, 12000);
    })();
    // X面球體運動
    (() => {
        //先執行一次
        frontX.beginElement();
        setTimeout(() => {
            leftX.beginElement();
        }, 3000);
        setTimeout(() => {
            behindX.beginElement();
        }, 6000);
        setTimeout(() => {
            rightX.beginElement();
        }, 9000);
        // 循環執行動畫
        var time = setInterval(() => {
            frontX.beginElement();
            setTimeout(() => {
                leftX.beginElement();
            }, 3000);
            setTimeout(() => {
                behindX.beginElement();
            }, 6000);
            setTimeout(() => {
                rightX.beginElement();
            }, 9000);
        }, 12000);
    })();
})

我設置的是讓animateMotion元素的起始值begin為infinite，在頁面加載完畢后動畫不會自動執行。
我用jQuery來控制動畫的執行順序。

首先獲取每個動畫元素const animate = document.getElementsByTagName("animateMotion");，之后將每個動畫元素都標記好。
接著使用計時器setInterval和setTimeout計時器來控制動畫。首先使用setInterval來控制動畫循環執行。接著在setInterval中用setTimeout設置動畫執行的順序，每個setTimeout計時器的延遲都為之前所有動畫時間之和。模塊化的最好先設置一個動畫對象數組，然后將動畫順序加入數組。

最后附加兩個API

// svg指當前svg DOM元素
// 暫停
svg.pauseAnimations();
// 重啟動
svg.unpauseAnimations()

兩個API可已暫停當前動畫，關于詳情請看張鑫旭大佬的文章鑫空間

旋轉控制是我還沒完善的地方，用戶體驗不是十分好，還望大佬們幫我指出錯誤。另一個旋轉方案過一兩天再添加上來。
代碼：

var X = 0;//記錄X軸旋轉過的角度
var Y = 0;//記錄Y軸旋轉過的角度
// 旋轉控制
$(".container").mousedown(function (event) {
    var mousedownX = event.clientX;
    var mousedownY = event.clientY;
    $("body").mousemove(function (event) {
        var mousemoveX = event.clientX;
        var mousemoveY = event.clientY;
        var scaleY = ((mousemoveX - mousedownX) / 200);
        var scaleX = ((mousemoveY - mousedownY) / 200);
        Y = ((Y + scaleY) % 360);
        X = ((X + scaleX) % 360);
        $(".container").animate({}, function () {
            $(".container").css({ "transform": `rotateX(${X}deg) rotateY(${Y}deg)` });
        })
    })
})
$("body").mouseup(function () {
    $("body").unbind("mousemove");
    $("body").unbind("mousedown");
})

首先設置兩個變量X，Y這是記錄這個立方體真正旋轉了多少角度。
然后在立方體.container元素上添加鼠標點擊事件mousedown事件，在回調函數中做處理內容。回調函數中先記錄下來鼠標點擊的位置。
接著在body上添加鼠標移動mousemove事件因為我們移動不能只在立方體上，移動的范圍要擴大到頁面上。接著在移動事件中的回調函數做旋轉處理，首先記錄下來移動后鼠標的位置，計算出鼠標移動的距離然后除以一個數var scaleY = ((mousemoveX - mousedownX) / 200);注意其中的200沒有真正代表的意義，只是因為鼠標移動的距離數值相對于旋轉的角度來說比較大，所以除以200減少它移動的角度，可以隨意更改，其中鼠標在X軸上移動用戶需要的是圖形在以Y軸旋轉。接著我么要計算立方體真正對于初始旋轉了多少角度我們最好做一下范圍限制(取模運算)，Y = ((Y + scaleY) % 360);最后就是設置屬性了，先用$(".container").animate()讓旋轉用動畫的形式來做成，然后設置旋轉角度$(".container").css({ "transform": rotateX(${X}deg) rotateY(${Y}deg) });用css()方法來設置旋轉角度。

最后將github庫放上來
github庫