Changing the side menu transition

Hi, thank you for this wonderful plugin.
I was wondering if there is a way to change the side menu transition using the “Custom CSS” section under “advanced options”.

First of all, I tried to disable the transition with this code:

.mob-menu-slideout-over .mob-menu-left-panel {
    -webkit-transition: -webkit-transform 0s;
    -moz-transition: -moz-transform 0s;
    -ms-transition: -ms-transform 0s;
    -o-transition: -o-transform 0s;
    transition: transform 0s;
}

But it doesnt work and i dont know why. (i even purged the cache and my menu is on the left side).

My goal is to have the menu to open like a page of a book, here’s an example:

<center>
    <div class="container">
  <div class="examplepage"></div></div>
</center>
<style>
.container{
    perspective: 500px;
    perspective-origin: middle middle;
}
.examplepage{
    background :  red;
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    cursor: pointer;
    
    backface-visibility: visible;
    transform-origin: left center;
    transition: transform 1s ease-in-out,box-shadow .35s ease-in-out;
    transform: rotateY(-100deg) scale(1.1);
}
.container:hover .examplepage{
  transform: rotateY(0deg) scale(1.1);
}
</style>

What classes should i use to achieve this effect? (as long as it is possible with the free version).

Thank you.