html 浮动按钮并在卡组中旋转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 浮动按钮并在卡组中旋转相关的知识，希望对你有一定的参考价值。
<div class="container">
<section class="section">
<h3 class="h3-responsive text-xs-center animated fadeInUp">Here is your code...you are welcome!</h3>
</section>
<!-- Cards -->
<div class="card-group">
<!-- Rotating card 1 -->
<div class="card-wrapper col-md-4">
<div id="card-1" class="card card-rotating effect__click">
<!-- Front Side -->
<div class="face front">
<!-- Image-->
<div class="card-up">
<img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
</div>
<!-- Triggering button -->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-right"></i></a>
<!-- Content -->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</div>
<!-- /.Front Side -->
<!-- Back Side -->
<div class="face back">
<!-- Content -->
<h4>About me</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="inline-ul">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!-- Triggering button -->
<a class="btn-floating rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-left"></i></a>
</div>
<!-- /.Back Side -->
</div>
</div>
<!-- /.Rotating card 1 -->
<!-- Rotating card 2 -->
<div class="card-wrapper col-md-4">
<div id="card-2" class="card card-rotating effect__click">
<!-- Front Side -->
<div class="face front">
<!-- Image-->
<div class="card-up">
<img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
</div>
<!-- Triggering button -->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-right"></i></a>
<!-- Content -->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</div>
<!-- /.Front Side -->
<!-- Back Side -->
<div class="face back">
<!-- Content -->
<h4>About me</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="inline-ul">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!-- Triggering button -->
<a class="btn-floating rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-left"></i></a>
</div>
<!-- /.Back Side -->
</div>
</div>
<!-- /.Rotating card 2 -->
<!-- Rotating card 3 -->
<div class="card-wrapper col-md-4">
<div id="card-3" class="card card-rotating effect__click">
<!-- Front Side -->
<div class="face front">
<!-- Image-->
<div class="card-up">
<img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
</div>
<!-- Triggering button -->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-right"></i></a>
<!-- Content -->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</div>
<!-- /.Front Side -->
<!-- Back Side -->
<div class="face back">
<!-- Content -->
<h4>About me</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="inline-ul">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!-- Triggering button -->
<a class="btn-floating rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-left"></i></a>
</div>
<!-- /.Back Side -->
</div>
</div>
<!-- /.Rotating card 3 -->
</div>
<!-- /.card group -->
</div>
<!-- /.container -->以上是关于html 浮动按钮并在卡组中旋转的主要内容，如果未能解决你的问题，请参考以下文章