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; }
.clearfix: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、查看效果。
