3d

HTML

<div class="rp-wheel"><div class="rp-wheelWrap"><div class="rp-wheelTrack"><div>JANUARY</div><div>FEBRUARY</div><div>MARCH</div><div>APRIL</div><div>MAY</div></div></div><div class="rp-wheelShadow"></div></div>

CSS

.rp-wheel {
    perspective: 2000px;
    height: 48px;
    padding: 9px 0;
    box-sizing: border-box;
    background: white;
    cursor: s-resize;
    overflow: hidden;
}
.rp-wheel * {
    pointer-events: none;
}
.rp-wheelWrap {
    transform-style: preserve-3d;
    transform: translateZ(-18px);
    width: 100%;
    height: 100%;
}
.rp-wheel .rp-wheelShadow {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset rgba(255,255,255,1) 0px 26px 8px -18px, inset rgba(255,255,255,1) 0px -26px 8px -18px;
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: rotateX(0deg);
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div {
    background: white;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 30px;
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div:nth-child(1) {
    transform: rotateX(0deg) translateZ(19px);
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div:nth-child(2) {
    transform: rotateX(-72deg) translateZ(19px);
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div:nth-child(3) {
    transform: rotateX(-144deg) translateZ(19px);
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div:nth-child(4) {
    transform: rotateX(-216deg) translateZ(19px);
}
.rp-wheel .rp-wheelWrap .rp-wheelTrack div:nth-child(5) {
    transform: rotateX(-288deg) translateZ(19px);
}

JavaScript

var validation = false,
	roll = document.querySelector('.rp-wheel'),
    track = document.querySelector('.rp-wheelTrack'),
    clickPos = 0;

roll.onmousedown = function(e){
	e.preventDefault();
    clickPos = e.pageY;
    validation = true;
    
};
window.onmouseup = function(e){
	e.preventDefault();
    validation = false;
    
};
document.onmouseleave = function(e){
	e.preventDefault();
    validation = false;
    
};
window.onmousemove = function(e){
	if( validation ){
    	var mov = e.pageY - clickPos;
        track.style.transform = 'rotateX('+-mov*3+'deg)';
    }
};


/*
app.directive('rpWheel', ['$document', function($document){

    function base360(number){
        if( number >= 360 ){
            number -= 360;
            return base360(number);
        }else if( number <= -360 ){
            number += 360;
            return base360(number);
        }else{
            if( number < 0 ){
                number = number + 360;
            }
            return number;
        }
    }
    function round5(x){
        return Math.ceil(x/5)*5;
    }
    function getValues(options){
        var values = [],
            groupMaxLength = 5,
            elementsCount = round5(options.length),
            elementsFix = elementsCount - options.length,
            groupsCount = elementsCount / groupMaxLength;
        for( var groupIndex = 0; groupIndex < groupsCount; groupIndex++ ){
            var aGroup = [],
                initCount = groupIndex*groupMaxLength,
                endCount = initCount+groupMaxLength;
            for( var optionIndex = initCount; optionIndex < endCount; optionIndex++ ){
                if( options[optionIndex] ){ aGroup.push(options[optionIndex]) };
            }
            values.push(aGroup);
        }
        return values;
    }

    return {
        restrict: 'E',
        transclude: false,
        replace: true,
        template: '<div class="rp-wheel" ng-mousedown="activateWheel($event)">' +
        '<div...