3D - AnimateJS

HTML

<div class="scene"></div>
<script src="https://cdn.jsdelivr.net/gh/XHiddenProjects/AnimateJS@master/animate.min.js"></script>

CSS

@import url('https://cdn.jsdelivr.net/gh/XHiddenProjects/AnimateJS@master/animate.min.css');
@import url('https://cdn.jsdelivr.net/gh/XHiddenProjects/AnimateJS@master/animate_draw.min.css');

JavaScript

// Initialize AnimateJS
const animate = new AnimateJS(),
transitions = new AnimateEvents();
animate.draw.cube({
    container: '.scene',
    margin: 100,
    face:{
        front:{
            background: 'green'
        },
        back:{
            background: 'lime'
        },
        top:{
            background: 'blue',
            opacity: 1
        },
        left:{
            background: 'gray'
        },
        right:{
            background: 'lightgray'
        },
        bottom:{
            background: 'pink',
            opacity: 1
        }
    }
});
const [cube] = animate.Utils.$('.scene .cube');
transitions
.clickRotate(cube, 0.2)
.scrollZoom(cube,0.5,3);

animate.add(new AnimationJS('threeD','rotate')
.createTimeline('from',new KeyFrames().rotate3D(0,0,0,0))
.createTimeline('to',new KeyFrames().rotate3D(1,1,0,360))
.develop());
animate.animate(cube,'threeD.rotate',{
    count:animate.INFINITE,
    duration: animate.SLOW
});