<iframe 
    src="https://jsxgraph.org/share/iframe/3d-cube-transformations" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: 3D cube transformations" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

            var board = JXG.JSXGraph.initBoard(BOARDID, {
                boundingbox: [-10, 7, 6, -9],
                keepaspectratio: false,
                axis: false
            });
    
            // Slider for rotations
            var alpha = board.create('slider', [[-7, -6], [2, -6], [0, 0, 2 * Math.PI]], { name: '&alpha;' });
            var beta = board.create('slider', [[-7, -6.5], [2, -6.5], [0, 0, 2 * Math.PI]], { name: '&beta;' });
            var gamma = board.create('slider', [[-7, -7], [2, -7], [0, 0, 2 * Math.PI]], { name: '&gamma;' });
    
            // 3D view
            var bound = [-5, 5];
            var view = board.create('view3d',
                [[-6, -2], [8, 8],
                [bound, bound, bound]],
                {
                    projection: 'parallel',
                    depthOrder: {
                        enabled: true
                    },
                    xPlaneRear: { visible: false },
                    yPlaneRear: { visible: false }
                });
    
            // Cube
            var r = 2;
            var cube = view.create('polyhedron3d', [
                {
                    a: [-r, -r, -r],
                    b: [r, -r, -r],
                    c: [r, r, -r],
                    d: [-r, r, -r],
                    e: [-r, -r, r],
                    f: [r, -r, r],
                    g: [r, r, r],
                    h: [-r, r, r]
                    },
                    [
                        ['a', 'b', 'c', 'd'],
                        ['a', 'b', 'f', 'e'],
                        ['b', 'c', 'g', 'f'],
                        ['c', 'd', 'h', 'g'],
                        ['d', 'a', 'e', 'h'],
                        ['e', 'f', 'g', 'h']
                    ]
                ], {
                fillColorArray: ['white', 'blue', 'red', 'green', 'orange', 'yellow'],
                fillOpacity: 0.9
            });
    
            // Add transformations
            var t1 = view.create('transform3d', [() => alpha.Value()], { type: 'rotateX' });
            var t2 = view.create('transform3d', [() => beta.Value()], { type: 'rotateY' });
            var t3 = view.create('transform3d', [() => gamma.Value()], { type: 'rotateZ' });
            cube.addTransform(cube, [t1, t2, t3]);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="3D cube transformations" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
           var board = JXG.JSXGraph.initBoard(BOARDID, {
               boundingbox: [-10, 7, 6, -9],
               keepaspectratio: false,
               axis: false
           });
   
           // Slider for rotations
           var alpha = board.create('slider', [[-7, -6], [2, -6], [0, 0, 2 * Math.PI]], { name: '&alpha;' });
           var beta = board.create('slider', [[-7, -6.5], [2, -6.5], [0, 0, 2 * Math.PI]], { name: '&beta;' });
           var gamma = board.create('slider', [[-7, -7], [2, -7], [0, 0, 2 * Math.PI]], { name: '&gamma;' });
   
           // 3D view
           var bound = [-5, 5];
           var view = board.create('view3d',
               [[-6, -2], [8, 8],
               [bound, bound, bound]],
               {
                   projection: 'parallel',
                   depthOrder: {
                       enabled: true
                   },
                   xPlaneRear: { visible: false },
                   yPlaneRear: { visible: false }
               });
   
           // Cube
           var r = 2;
           var cube = view.create('polyhedron3d', [
               {
                   a: [-r, -r, -r],
                   b: [r, -r, -r],
                   c: [r, r, -r],
                   d: [-r, r, -r],
                   e: [-r, -r, r],
                   f: [r, -r, r],
                   g: [r, r, r],
                   h: [-r, r, r]
                   },
                   [
                       ['a', 'b', 'c', 'd'],
                       ['a', 'b', 'f', 'e'],
                       ['b', 'c', 'g', 'f'],
                       ['c', 'd', 'h', 'g'],
                       ['d', 'a', 'e', 'h'],
                       ['e', 'f', 'g', 'h']
                   ]
               ], {
               fillColorArray: ['white', 'blue', 'red', 'green', 'orange', 'yellow'],
               fillOpacity: 0.9
           });
   
           // Add transformations
           var t1 = view.create('transform3d', [() => alpha.Value()], { type: 'rotateX' });
           var t2 = view.create('transform3d', [() => beta.Value()], { type: 'rotateY' });
           var t3 = view.create('transform3d', [() => gamma.Value()], { type: 'rotateZ' });
           cube.addTransform(cube, [t1, t2, t3]);
</jsxgraph>