body
{
    margin: 0;
    padding: 0;
    direction: rtl;
}
.canvasHolder {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

#canvas {
        /* Currently only works in IE10 */
    /* ignored by other browsers */
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    
    /* using CSS3 Transitions with all vendors prefixes */
    /* for IE10, Chrome & Safari, Firefox, Opera */
    -ms-transition-property: all;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: ease;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -moz-transition-property: all;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
    -o-transition-property: all;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;
    
    transition-property: all;
    transition-duration: 1s;
    
    -ms-backface-visibility: visible;
    -ms-transform-origin: 50% 50%;
    -webkit-backface-visibility: visible;
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 50%;
    -moz-backface-visibility: visible;
    -moz-transform-origin: 50% 50%;

    backface-visibility: visible;
    transform-origin: 50% 50%;
}

.moveRotation
{
    -ms-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -webkit-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -moz-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -o-transform: scale(0);
}

.initialRotation
{
    -ms-transform: perspective(500px) rotateY(0deg) scale(1);
    -webkit-transform: perspective(500px) rotateY(0deg) scale(1);
    -moz-transform: perspective(500px) rotateY(0deg) scale(1);
    -o-transform: scale(1);
}