js+css3图片3D旋转可以多用
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="htmleaf-container">
<h1>3D Rotating Carousel Examples</h1>
<h2>Three images</h2>
<div class="carousel">
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<h2>Four images</h2>
<div class="carousel">
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<h2>Eight images</h2>
<div class="carousel">
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/6.jpg" alt=""> <img src="img/7.jpg" alt=""> <img src="img/8.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<h2>Eight images, with 20px gap</h2>
<div class="carousel" data-gap="20">
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/6.jpg" alt=""> <img src="img/7.jpg" alt=""> <img src="img/8.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<h2>Eight images, with 80px gap</h2>
<div class="carousel" data-gap="80">
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/6.jpg" alt=""> <img src="img/7.jpg" alt=""> <img src="img/8.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<h2>Hidden backfaces</h2>
<div class="carousel" data-gap="20" data-bfc>
<figure> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/6.jpg" alt=""> <img src="img/7.jpg" alt=""> <img src="img/8.jpg" alt=""> </figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
</div>
4、初始化css代码。
<style>
body, html { font-size: 100%; padding: 0; margin: 0; }
*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body { font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }
.htmleaf-links a { color: rgba(255, 255, 255, 0.6); outline: none; text-decoration: none; transition: 0.2s; transition: 0.2s; }
.htmleaf-links a:hover, .htmleaf-links a:focus { color: #74777b; text-decoration: none; }
.htmleaf-container { margin: 0 auto; }
</style>
5、书写css代码。
body { margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; }
h1 { text-align: center; margin-bottom: 1.5em; }
h2 { text-align: center; color: #555; margin-bottom: 0; }
.carousel { padding: 20px; --perspective: 500px; perspective: 500px; overflow: hidden; display: --box; display: -ms-flexbox; display: flex; --box-orient: vertical; --box-direction: normal; -ms-flex-direction: column; flex-direction: column; --box-align: center; -ms-flex-align: center; align-items: center; }
.carousel > * { --box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.carousel figure { margin: 0; width: 40%; --transform-style: preserve-3d; transform-style: preserve-3d; --transition: --transform 0.5s; transition: --transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, --transform 0.5s; }
.carousel figure img { width: 100%; box-sizing: border-box; padding: 0 0px; }
.carousel figure img:not(:first-of-type) { position: absolute; left: 0; top: 0; }
.carousel nav { display: --box; display: -ms-flexbox; display: flex; --box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 20px 0 0; }
.carousel nav button { --box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 5px; cursor: pointer; color: #333; background: none; border: 1px solid; letter-spacing: 1px; padding: 5px 10px; }
6、代码整体结构。
7、查看效果。
