CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
<a class="btn btn-primary btn-lg transition-3d-hover hover-shadow-primary" href="#0">.transition-3d-hover</a>
<a class="btn btn-success btn-lg transition-3d-hover hover-shadow-success" href="#0">.transition-3d-hover</a>
<a class="btn btn-secondary btn-lg transition-3d-hover hover-shadow-secondary" href="#0">.transition-3d-hover</a>
<a class="btn btn-danger btn-lg transition-3d-hover hover-shadow-danger" href="#0">.transition-3d-hover</a>
<a class="btn btn-warning btn-lg transition-3d-hover hover-shadow-warning" href="#0">.transition-3d-hover</a>
<a class="btn btn-info btn-lg transition-3d-hover hover-shadow-info" href="#0">.transition-3d-hover</a>
<a class="btn btn-light btn-lg transition-3d-hover hover-shadow-light" href="#0">.transition-3d-hover</a>
<a class="btn btn-dark btn-lg transition-3d-hover hover-shadow-dark" href="#0">.transition-3d-hover</a>
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card transition-3d-hover">
<img class="card-img-top" src="assets/img/img7.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>