<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷3D透视轮播图特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>炫酷3D透视轮播图特效 <span>Smooth 3d perspective slider</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="slider" id="slider" style="--img-prev:url(img/1.jpg)">
<div class="slider__content" id="slider-content">
<div class="slider__images">
<div class="slider__images-item slider__images-item--active" data-id="1"><img src="img/1.jpg"/></div>
<div class="slider__images-item" data-id="2"><img src="img/2.jpg"/></div>
<div class="slider__images-item" data-id="3"><img src="img/3.jpg"/></div>
<div class="slider__images-item" data-id="4"><img src="img/4.jpg"/></div>
<div class="slider__images-item" data-id="5"><img src="img/5.jpg"/></div>
</div>
<div class="slider__text">
<div class="slider__text-item slider__text-item--active" data-id="1">
<div class="slider__text-item-head">
<h3>Forest</h3>
</div>
<div class="slider__text-item-info">
<p>“And into the forest I go, to lose my mind and find my soul”</p>
</div>
</div>
<div class="slider__text-item" data-id="2">
<div class="slider__text-item-head">
<h3>Lake</h3>
</div>
<div class="slider__text-item-info">
<p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p>
</div>
</div>
<div class="slider__text-item" data-id="3">
<div class="slider__text-item-head">
<h3>Cliffs</h3>
</div>
<div class="slider__text-item-info">
<p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p>
</div>
</div>
<div class="slider__text-item" data-id="4">
<div class="slider__text-item-head">
<h3>Mountains</h3>
</div>
<div class="slider__text-item-info">
<p>“What are men to rocks and mountains?”</p>
</div>
</div>
<div class="slider__text-item" data-id="5">
<div class="slider__text-item-head">
<h3>Peaks</h3>
</div>
<div class="slider__text-item-info">
<p>“On all the peaks lies peace”</p>
</div>
</div>
</div>
</div>
<div class="slider__nav">
<div class="slider__nav-arrows">
<div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
<div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
</div>
<div class="slider__nav-dots" id="slider-dots">
<div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
<div class="slider__nav-dot" data-id="2"></div>
<div class="slider__nav-dot" data-id="3"></div>
<div class="slider__nav-dot" data-id="4"></div>
<div class="slider__nav-dot" data-id="5"></div>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
JS和CSS3炫酷3D透视轮播图特效.zip （18个子文件） 
132689877472629757 CSS3_3Dtslbt css 
htmleaf-demo.css 6KB style.css 10KB normalize.css 2KB babel index.babel 9KB related 
2.jpg 44KB 1.jpg 24KB img 2.jpg 74KB 1.jpg 89KB 3.jpg 53KB 5.jpg 103KB 4.jpg 61KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js index.js 10KB scss style.scss 8KB资源评论
