Не работает полоса прокрутки, без использования CSS свойства perspective

0

1

Всем здоровья!

Столкнулся со следующей проблемой.

Использую библиотеку DayPilot, там у меня есть недельный календарь и месячный.

Решил что бы было красиво и на одной странице, разные типы календаря распихать на разные стороны куба..

Проблема в том что после того как листаю на сторону месяца например, колесо прокрутки у календаря перестает работать.

А если добавить свойство perspective кубу все работает, но с ним изображение размывается и это бесит.

<div id="wrapper-calendar">
    <div id="cube-calendar">
        <div class="one-calendar">ONE</div>

        <div class="face-calendar two-calendar">
            <div id="dp" ></div>
        </div>

        <div class="face-calendar three-calendar">
            <div id="dpMonth"></div>
        </div>

        <div class="face-calendar four-calendar">
            FOUR
        </div>

        <div class="face-calendar five-calendar">
            
        </div>

        <div class="six-calendar">
            This is bad
        </div>
    </div>
</div>            
</br>
<a class="week-view" >Week</a>
<a class="day-view" >Day</a>
<a class="month-view" >Month</a>

Вот CSS

#wrapper-calendar {
    margin-left: -20px;
    -webkit-perspective: 2700px;
    -webkit-perspective-origin: 160% -200px;
    perspective: 2700px;
    padding: 0px;
    perspective-origin: 140% -180px;

}

#cube-calendar {
    position: relative;
    margin: 0 auto;
    height: 456px;
    width: 250px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 2s ease;
    transform-style: preserve-3d;
    transition: all 2s ease;
}

.face-calendar {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    border: solid 1px #ccc;
    border-radius: 7px;
}

.top-calendar{
    margin-top: 200px;
}

.bottom-calendar {

}

#cube-calendar .two-calendar {

}

#cube-calendar .one-calendar {
    /* translateZ is de helft van de breedte van de cubus */
    -webkit-transform: rotateX(90deg) translateZ(110px);
    transform: rotateX(90deg) translateZ(110px);
}

#cube-calendar .two-calendar {
    -webkit-transform: translateZ(126px);
    transform: translateZ(126px);
}

#cube-calendar .three-calendar {
    -webkit-transform: rotateY(90deg) translateZ(126px);
    transform: rotateY(90deg) translateZ(126px);
}

#cube-calendar .four-calendar {
    -webkit-transform: rotateY(180deg) translateZ(126px);
    transform: rotateY(180deg) translateZ(126px);
}

#cube-calendar .five-calendar {
    -webkit-transform: rotateY(-90deg) translateZ(126px);
    transform: rotateY(-90deg) translateZ(126px);
}

#cube-calendar .six-calendar {
    -webkit-transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
    transform: rotateX(-90deg) translateZ(150px) rotate(180deg);
}

Как починить это дело все?(

Ссылка

Похожие темы