MDB 4.0, I am building website with rotating cards and found the issue for that I have padding on the back but not on the front. my html:

<div class="card-wrapper">
    <div id="card-1" class="card-rotating effect__click wow fadeInRight">
        <!--Front Side-->
        <div class="face front">
            <div class="card-up"><h3 class="white">@Messages("signin.signin")</h3></div>
            <div class="unique-color">&nbsp;</div>
            <div class="unique-color-dark"><a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here for Signup</a></div>
        </div>
        <!--/.Front Side-->
        <!--Back Side-->
        <div class="face back">
            <div class="card-up"><h3 class="white">@Messages("signup.signup")</h3></div>
            <div class="unique-color">&nbsp;</div>
            <div class="unique-color-dark"><a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here for Login</a></div>
        </div>
        <!--/.Back Side-->
    </div>
</div>

I found paading defined for the back, but not for the front. .card-wrapper .front, .card-wrapper .back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 1.0s; transition: transform 1.0s; } .card-wrapper .back { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); padding: 1rem; }

---