Hi,

try this code:

CSS:

/* Required for full background image */

html,
body,
header,
.view {
height: 100%;
}

@media (max-width: 740px) {
header {
height: 1850px;
}
}

@media (min-width: 741px) and (max-width: 800px) {
header {
height: 1250px;
}
}

.top-nav-collapse {
background-color: #563e91 !important;
}

.navbar:not(.top-nav-collapse) {
background: transparent !important;
}

@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #563e91 !important;
}
}

.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}

video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

HTML:

<!-- Main navigation -->
<header>
<!-- Full Page Intro -->
<div class="view">
<video poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-4 col-md-12 pb-5 mt-lg-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-1" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header blue">
<h1>10</h1>
<div class="version">
<h5>Basic</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-blue rotate-btn" data-card="card-1">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-blue"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-4 col-md-6 py-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-2" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo">
<h1>20</h1>
<div class="version">
<h5>Pro</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-indigo rotate-btn" data-card="card-2">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-2"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-indigo"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-4 col-md-6 py-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-3" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header deep-purple">
<h1>30</h1>
<div class="version">
<h5>Enterprise</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-deep-purple rotate-btn" data-card="card-3">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-3"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-deep-purple"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
<!-- Main navigation -->

Best,

Marta