以下是 jQuery+CSS3立体旋转项目展示代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>jQuery+CSS3立体旋转项目展示代码</title>
<script src="js/modernizr.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="cd-3d-portfolio">
<nav class="cd-3d-portfolio-navigation">
<div class="cd-wrapper">
<h1>jQuery+CSS3立体旋转项目展示代码</h1>
<ul>
<li><a href="#0" class="selected">Filter 1</a></li>
<li><a href="#0">Filter 2</a></li>
<li><a href="#0">Filter 3</a></li>
</ul>
</div>
</nav> <!-- .cd-3d-portfolio-navigation -->
<div class="projects">
<ul class="row">
<li class="front-face selected project-1">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 1</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quod, molestiae voluptates commodi debitis saepe hic, aut magnam accusantium nostrum error ratione eum vero accusamus autem modi labore doloremque explicabo ut perspiciatis nulla molestias sequi eligendi tempore libero. Dolore iste vitae illum sequi neque quas, dolorem dolor officiis voluptatum quae voluptatibus tenetur molestias soluta blanditiis amet debitis incidunt eaque ratione facere repudiandae cupiditate aspernatur, velit ea itaque. Optio aut harum ad modi dolore doloribus tenetur laboriosam aspernatur minima itaque velit quia, illo sapiente unde, eum autem expedita facilis aliquam, dolorum dicta fuga totam sed pariatur iste! Inventore laudantium qui nostrum, perspiciatis quod! Molestias asperiores facilis explicabo necessitatibus dicta perferendis, esse, quisquam autem corporis ab doloremque nisi voluptas quidem, modi sequi aperiam, illum reiciendis delectus nostrum architecto eligendi sint deleniti voluptate! Magni quia harum eligendi laudantium fuga aspernatur veniam sunt impedit, vitae sit praesentium quam porro dolorem in eveniet iusto. Dicta tempora quo itaque minima expedita accusamus ex perferendis repellat totam! Fugit rerum nihil distinctio ducimus delectus, accusamus enim eos eum nulla fugiat aliquam blanditiis minus omnis maiores, quia numquam placeat. Molestias cupiditate deleniti porro praesentium, aliquam blanditiis maxime iste necessitatibus provident optio ipsum, beatae, libero nostrum, maiores! Temporibus, reiciendis, quibusdam.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-2">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 2</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-3">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 3</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
</ul> <!-- .row -->
<ul class="row">
<li class="front-face selected project-4">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 1</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-5">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 2</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-6">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 3</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
</ul> <!-- .row -->
<ul class="row">
<li class="front-face selected project-7">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 1</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-8">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 2</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
<li class="right-face project-9">
<div class="project-wrapper">
<div class="project-image">
<div class="project-title">
<h2>Project 3</h2>
</div>
</div> <!-- .project-image -->
<div class="project-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius ea sequi distinctio autem repellat, libero esse nam. Quam nesciunt nobis iure cupiditate neque hic magnam optio assumenda unde sequi. Rem cumque iure cum reprehenderit repellendus, autem voluptates maxime ipsa numquam libero nobis saepe laudantium amet praesentium voluptatibus, fuga eveniet.
</p>
</div>
</div> <!-- .project-content -->
<a href="#0" class="close-project">Close</a>
</div> <!-- .project-wrapper -->
</li>
</ul> <!-- .row -->
</div><!-- .projects -->
<a href="#0" class="cd-top">Top</a>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
var isPreserve3DSupported = ( $('.preserve3d').length > 0 ),isTransitionSupported = ( $('.csstransitions').length > 0 ),backToTopBtn = $('.cd-top');
function Portfolio3D( element ){
//define a Portfolio3D objectthis.element = element;
this.navigation = this.element.children('.cd-3d-portfolio-navigation');
this.rowsWrapper = this.element.children('.projects');
this.rows = this.rowsWrapper.children('.row');
this.visibleFace = 'front';
this.visibleRowIndex = 0;
this.rotationValue = 0;
//animating variablesthis.animating = false;
this.scrolling = false;
// bind portfolio eventsthis.bindEvents();
}
Portfolio3D.prototype.bindEvents = function(){
var self = this;
this.navigation.on('click','a:not(.selected)',function(event){
//update visible projects when clicking on the filterevent.preventDefault();
if( !self.animating ){
self.animating = true;
var index = $(this).parent('li').index();
//update filter$(this).addClass('selected').parent('li').siblings('li').find('.selected').removeClass('selected');
//show new projectsself.showNewContent(index);
}
}
);
this.rows.on('click','li.selected',function(){
//open a new projectif( !self.animating && !$(this).hasClass('open')){
self.animating = true;
self.rowsWrapper.addClass('project-is-open project-has-transition');
$(this).addClass('open').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
//wait for the end of the transition and set the animating variable to truself.animating = false;
$(this).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
}
);
if(!isTransitionSupported) self.animating = false;
}
}
);
this.element.on('click','.close-project',function(event){
event.preventDefault();
//close a projectif( !self.animating ){
self.animating = true;
self.rowsWrapper.removeClass('project-is-open');
self.rows.find('li.open').find('.project-title').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
//wait until the project is clodes and remove classes/set animating to false$(this).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
self.resetProjects();
}
);
if(!isTransitionSupported) self.resetProjects();
}
}
);
this.rowsWrapper.find('.project-wrapper').on('scroll',function(){
//detect scroll incide an open project - hide/show back to topvar scrollValue = $(this).scrollTop();
if(!self.scrolling){
self.scrolling = true;
(!window.requestAnimationFrame) ? setTimeout(function(){
self.checkScroll(scrollValue);
}
,250):window.requestAnimationFrame(function(){
self.checkScroll(scrollValue);
}
);
}
}
);
}
;
Portfolio3D.prototype.resetProjects = function(){
this.rows.find('li.open').removeClass('open');
this.rowsWrapper.removeClass('project-has-transition');
this.animating = false;
}
;
Portfolio3D.prototype.checkScroll = function(scrollValue){
( scrollValue > 300 ) ? backToTopBtn.addClass('is-visible'):backToTopBtn.removeClass('is-visible cd-fade-out');
this.scrolling = false;
}
Portfolio3D.prototype.showNewContent = function(index){
var self = this,direction = ( index > self.visibleRowIndex ) ? 'rightToLeft':'leftToRight',rotationParams = this.getRotationPrameters( direction ),newVisibleFace = rotationParams[0],rotationY = rotationParams[1],translateZ = $(window).width()/2;
this.rows.each(function(){
$(this).children('li').addClass('hidden').removeClass('selected').eq(index).removeClass('hidden left-face right-face back-face front-face').addClass(newVisibleFace + '-face selected').end().eq(self.visibleRowIndex).removeClass('hidden selected');
}
);
//if preserve3D is supported -> rotate projectsisPreserve3DSupported? this.setTransform(rotationY,translateZ):self.animating = false;
this.visibleFace = newVisibleFace;
this.visibleRowIndex = index;
this.rotationValue = rotationY;
}
;
Portfolio3D.prototype.getRotationPrameters = function(direction){
var newVisibleFace,rotationY;
if( this.visibleFace == 'front' ){
newVisibleFace = ( direction == 'rightToLeft' ) ? 'right':'left';
}
else if( this.visibleFace == 'right' ){
newVisibleFace = ( direction =='rightToLeft' ) ? 'back':'front';
}
else if( this.visibleFace == 'left' ){
newVisibleFace = ( direction =='rightToLeft' ) ? 'front':'back';
}
else{
newVisibleFace = ( direction =='rightToLeft' ) ? 'left':'right';
}
if( direction == 'rightToLeft' ){
rotationY = this.rotationValue - 90;
}
else{
rotationY = this.rotationValue + 90;
}
return [newVisibleFace,rotationY];
}
;
Portfolio3D.prototype.setTransform = function(rotationValue,translateValue){
var self = this;
this.rows.each(function(index){
$(this).css({
'-moz-transform':'translateZ(-'+ translateValue +'px) rotateY(' + rotationValue + 'deg)','-webkit-transform':'translateZ(-'+ translateValue +'px) rotateY(' + rotationValue + 'deg)','-ms-transform':'translateZ('-+ translateValue +'px) rotateY(' + rotationValue + 'deg)','-o-transform':'translateZ(-'+ translateValue +'px) rotateY(' + rotationValue + 'deg)','transform':'translateZ(-'+ translateValue +'px) rotateY(' + rotationValue + 'deg)'}
);
if(index == 2)$(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$(this).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
self.animating = false;
}
);
}
);
}
;
Portfolio3D.prototype.scrollProjectTop = function(){
this.rows.children('li.selected.open').find('.project-wrapper').animate({
scrollTop:0}
,300);
}
if( $('.cd-3d-portfolio').length > 0 ){
var portfolios3D = [];
$('.cd-3d-portfolio').each(function(){
//create a Portfolio3D object for each .cd-3d-portfolioportfolios3D.push(new Portfolio3D($(this)));
}
);
}
var windowResize = false;
//detect window resize - reset .cd-products-comparison-table properties$(window).on('resize',function(){
if(!windowResize){
windowResize = true;
(!window.requestAnimationFrame) ? setTimeout(checkResize,250):window.requestAnimationFrame(checkResize);
}
}
);
function checkResize(){
portfolios3D.forEach(function(element){
//update transform values on resizeelement.setTransform(element.rotationValue,$(window).width()/2);
}
);
windowResize = false;
}
backToTopBtn.on('click',function(event){
//scroll to the top of a project when clicking the backToTop buttonevent.preventDefault();
portfolios3D.forEach(function(element){
element.scrollProjectTop();
}
);
}
);
}
);
CSS代码(htmleaf-demo.css):
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.htmleaf-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.htmleaf-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#fff;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;font-size:1.2em}
.related a h3{font-size:0.85em;font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1.4em;}
.htmleaf-links{font-size:1.4em}
}
@media screen and (max-width:960px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1.2em;}
.htmleaf-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.htmleaf-header h1{font-size:1.3em;}
.htmleaf-links{font-size:1.3em}
}
@media screen and (max-width:640px){.htmleaf-header{padding:2em 10% 2em;}
.htmleaf-header h1{font-size:1em;}
.htmleaf-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
