码云链接：https://gitee.com/djzm/codes/tdzr5sgojc7y6v8l2iauq92
原网页链接：https://www.html5tricks.com/demo/Slicebox/index4.html
原网页截图：
模仿网页截图：
鼠标放在四个按钮上时按钮变暗
HTML源码：
<!DOCTYPE html>
<html lang="en">
???<head>
???????<title>HTML5/jQuery 3D????????? ????????л???????????3</title>
<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">
???????<meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
???????<meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
<meta name="author" content="Pedro Botelho for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
???????<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
</head>
<body> ?
<div class="container">
<div class="more">
<ul id="sb-examples">
<li>More examples:</li>
<li><a href="index.html">Example 1</a></li>
<li><a href="index2.html">Example 2</a></li>
<li class="selected"><a href="index3.html">Example 3</a></li>
<li><a href="index4.html">Example 4</a></li>
</ul>
</div>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank"><img src="img/1.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/2.jpg" alt="image2"/></a>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/3.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/4.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/5.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Faithful Investor</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/6.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Groundbreaking Artist</h3>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="img/7.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Selfless Philantropist</h3>
</div>
</li>
</ul>
<div id="shadow" class="shadow"></div>
<div id="nav-arrows" class="nav-arrows">
<a href="#">Next</a>
<a href="#">Previous</a>
</div>
</div><!-- /wrapper -->
<p class="info"><strong>Example 3:</strong> Random orientation and number of slices</p>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slice.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( ‘#nav-arrows‘ ).hide(),
$shadow = $( ‘#shadow‘ ).hide(),
slice = $( ‘#sb-slider‘ ).slice( {
onReady : function() {
$navArrows.show();
$shadow.show();
},
orientation : ‘r‘,
cuboidsRandom : true
} ),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ‘:first‘ ).on( ‘click‘, function() {
slice.next();
return false;
} );
$navArrows.children( ‘:last‘ ).on( ‘click‘, function() {
slice.previous();
return false;
} );
};
return { init : init };
})();
Page.init();
});
</script>
</body>
</html>
模仿实现主流网页
原文地址：https://www.cnblogs.com/djzm/p/10611888.html