HTML5+css3+jq实现3D立方体动画

1、新建html文档。

2、书写hmtl代码。<div id="wrapper" class="clearfix"><div class="slider-outer"> <div class="slider-inner"> <div data-slide="1" class="slide front active"> <div class="slide-title">Slide 1<i class="fa fa-html5"></i></div> </div> <div data-slide="2" class="slide top"> <div class="slide-title">Slide 2<i class="fa fa-css3"></i></div> </div> <div data-slide="3" class="slide back"> <div class="slide-title">Slide 3<i class="fa fa-android"></i></div> </div> <div data-slide="4" class="slide bottom"> <div class="slide-title">Slide 4<i class="fa fa-mobile-phone"></i></div> </div> </div></div><nav id="nav" class="clearfix"> <ul class="clearfix"> <li><a href="href" data-slide="1" class="btn focus">1</a></li> <li><a href="href" data-slide="2" class="btn">2</a></li> <li><a href="href" data-slide="3" class="btn">3</a></li> <li><a href="href" data-slide="4" class="btn">4</a></li> </ul></nav></div>

3、书写css代码。<style>.clearfix { zoom: 1; }.clearfi旌忭檀挢x:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; }* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }body { background: #1d1d1f; font-family: 'lato', helvetica, arial, sans-serif; color: white; }#wrapper { display: block; width: 90%; margin: 50px auto; }.slider-outer { display: block; width: 100%; height: 250px; position: relative; -webkit-perspective: 1600px; -moz-perspective: 1600px; -o-perspective: 1600px; -ms-perspective: 1600px; }.slider-outer .slider-inner { display: block; width: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; }.slider-outer .slider-inner.rotate.two { -webkit-transform: rotateX(-90deg) translateZ(250px); -moz-transform: rotateX(-90deg) translateZ(250px); -o-transform: rotateX(-90deg) translateZ(250px); -ms-transform: rotateX(-90deg) translateZ(250px); }.slider-outer .slider-inner.rotate.three { -webkit-transform: rotateX(-180deg) translateY(-250px) translateZ(250px); -moz-transform: rotateX(-180deg) translateY(-250px) translateZ(250px); -o-transform: rotateX(-180deg) translateY(-250px) translateZ(250px); -ms-transform: rotateX(-180deg) translateY(-250px) translateZ(250px); }.slider-outer .slider-inner.rotate.four { -webkit-transform: rotateX(-270deg) translateY(-250px); -moz-transform: rotateX(-270deg) translateY(-250px); -o-transform: rotateX(-270deg) translateY(-250px); -ms-transform: rotateX(-270deg) translateY(-250px); }.slider-outer .slide { display: block; width: 100%; height: 250px; position: absolute; background: white; background-color: #ededed; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed)); background-image: -webkit-linear-gradient(top, white, #ededed); background-image: -moz-linear-gradient(top, white, #ededed); background-image: -o-linear-gradient(top, white, #ededed); background-image: linear-gradient(to bottom, white, #ededed); padding: 27px; color: #4ecdc4; overflow: hidden; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; }.slider-outer .slide .slide-title { display: block; position: relative; font-size: 70px; font-weight: 100; z-index: 12; }.slider-outer .slide i { display: block; position: absolute; top: 10px; right: -10px; font-size: 300px; color: #c7f464; z-index: 11; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); }.slider-outer .slide.top { background: #556270; background-color: #46505c; background-image: -webkit-gradient(linear, left top, left bottom, from(#556270), to(#46505c)); background-image: -webkit-linear-gradient(top, #556270, #46505c); background-image: -moz-linear-gradient(top, #556270, #46505c); background-image: -o-linear-gradient(top, #556270, #46505c); background-image: linear-gradient(to bottom, #556270, #46505c); -webkit-transform: rotateX(90deg) translateY(-250px); -moz-transform: rotateX(90deg) translateY(-250px); -o-transform: rotateX(90deg) translateY(-250px); -ms-transform: rotateX(90deg) translateY(-250px); }.slider-outer .slide.back { background: #ff6b6b; color: white; background-color: #ff4747; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6b6b), to(#ff4747)); background-image: -webkit-linear-gradient(top, #ff6b6b, #ff4747); background-image: -moz-linear-gradient(top, #ff6b6b, #ff4747); background-image: -o-linear-gradient(top, #ff6b6b, #ff4747); background-image: linear-gradient(to bottom, #ff6b6b, #ff4747); -webkit-transform: rotateX(180deg) translateY(-250px) translateZ(250px); -moz-transform: rotateX(180deg) translateY(-250px) translateZ(250px); -o-transform: rotateX(180deg) translateY(-250px) translateZ(250px); -ms-transform: rotateX(180deg) translateY(-250px) translateZ(250px); }.slider-outer .slide.bottom { background: #4ecdc4; background-color: #36c1b7; background-image: -webkit-gradient(linear, left top, left bottom, from(#4ecdc4), to(#36c1b7)); background-image: -webkit-linear-gradient(top, #4ecdc4, #36c1b7); background-image: -moz-linear-gradient(top, #4ecdc4, #36c1b7); background-image: -o-linear-gradient(top, #4ecdc4, #36c1b7); background-image: linear-gradient(to bottom, #4ecdc4, #36c1b7); color: white; -webkit-transform: rotateX(-90deg) translateZ(250px); -moz-transform: rotateX(-90deg) translateZ(250px); -o-transform: rotateX(-90deg) translateZ(250px); -ms-transform: rotateX(-90deg) translateZ(250px); }#nav { display: block; position: relative; width: 100%; margin-top: 27px; z-index: 10; }#nav ul { display: block; padding: 0; margin: 0 0 0; list-style: none; width: 190px; margin: 0 auto; text-align: left; }#nav ul li { display: block; float: left; margin-right: 10px; font-size: 18px; }#nav ul li:nth-of-type(4) { margin-right: 0; }#nav ul li a.btn { display: block; width: 40px; height: 40px; color: white; border: 3px solid white; border-radius: 30px; font-weight: 300; line-height: 35px; text-align: center; text-decoration: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; }#nav ul li a.btn:focus, #nav ul li a.btn:hover { color: #ff6b6b; border-color: #ff6b6b; }#nav ul li a.btn:active { color: #c44d58; border-color: #c44d58; }#nav ul li a.btn.focus { color: #c7f464; border-color: #c7f464; }</style>

4、书写并引用js。<script src='js/jquery.js'></script><script>(function() { var rotateSlider; $(function() { $('#nav').on('click', 'a', function(e) { var active, theSlide; e = e != null ? e : { e: window.event }; e.preventDefault(); e.stopPropagation(); if ($('#nav').hasClass('active')) { return false; } $('.focus').removeClass('focus'); $(this).addClass('focus'); $('#nav').addClass('active'); theSlide = $(this).attr('data-slide'); active = $('.active').attr('data-slide'); $('.slide').removeClass('active'); return rotateSlider(theSlide, active); }); setTimeout(function() { return $('#nav a[data-slide="2"]').trigger('click'); }, 500); setTimeout(function() { return $('#nav a[data-slide="3"]').trigger('click'); }, 1200); return setTimeout(function() { return $('#nav a[data-slide="4"]').trigger('click'); }, 1900); }); rotateSlider = function(slide, active) { var delta, slides, theSlide; slides = { 1: 'one', 2: 'two', 3: 'three', 4: 'four' }; theSlide = slides[slide]; delta = Math.abs(slide - active); if (delta === 3 && active === '1') { $('.slide[data-slide="' + slide + '"]').addClass('active'); $('.slider-inner').attr('class', 'slider-inner rotate two'); setTimeout(function() { return $('.slider-inner').attr('class', 'slider-inner rotate three'); }, 400); setTimeout(function() { return $('.slider-inner').attr('class', 'slider-inner rotate four'); }, 800); } else if (delta === 3 && active === '4') { $('.slide[data-slide="' + slide + '"]').addClass('active'); $('.slider-inner').attr('class', 'slider-inner rotate three'); setTimeout(function() { return $('.slider-inner').attr('class', 'slider-inner rotate two'); }, 350); setTimeout(function() { return $('.slider-inner').attr('class', 'slider-inner rotate one'); }, 700); } else { $('.slide[data-slide="' + slide + '"]').addClass('active'); $('.slider-inner').attr('class', 'slider-inner rotate ' + theSlide); } return $('#nav').removeClass('active'); };}).call(this);</script>

5、代码整体结构。

6、查看效果。