強大！HTML5 3D美女圖片旋轉實現教程

又到周末，來弄點HTML5的特效玩玩，今天要折騰的是HTML5 3D圖片特效，圖片在垂直方向上被分割成一條條小矩形，在圖片上拖動鼠標即可讓每一個小矩形旋轉，從而讓圖片形成3D立體的效果，來看看效果圖：

大家也可以在這里看到具體的DEMO演示。

下面我們來分析一下實現這款HTML5 3D圖片旋轉特效的源代碼，這里我們引用了知名的JS動畫框架TweenMax.js。

先來看看HTML代碼：

<ul id="level0" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level1" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level2" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level3" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level4" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level5" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level6" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level7" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level8" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level9" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level10" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level11" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level12" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>

這里我們看到，我們用了n個ul來實現將圖片分割成n個小長方形，為了之后js調用的方便，我們將這些ul標識成level-n。

然后我們再來看看CSS代碼，這里主要是引入了這張美女圖片，哈哈。

.cube {
  position: relative;
  margin: 0em auto 0;
  padding: 0px;
  width: 20em;
  height: 3.0em;
  list-style: none;
  transform-style: preserve-3d;
  /*animation: ani 8s infinite linear;*/
}

.face {
  box-sizing: border-box;
  position: absolute;
  top: 180px;
  left: 50%;
  /*border: 1px solid #f0f0f0;*/
  margin: -8em;
  padding: 1.6em;
  width: 20em;
  height: 2em;
  opacity: .85;
  background: lightblue;
  /*Creative Commons image from http://www.flickr.com/photos/37825670@N07/3562600154/sizes/z/in/photostream/ */
  background: url(k6dbiLv.jpg) -115px -900px;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}

.face:nth-child(1) {
  transform: translateZ(10em);
}

.face:nth-child(2) {
  transform: rotateY(180deg) translateZ(10em);
}

.face:nth-child(3) {
  transform: rotateY(90deg) translateZ(10em);
}

.face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(10em);
}

最后是Javascript代碼，這里我們引入了jQuery和動畫引擎TweenMax.js:

<script src='js/jquery.js'></script>
<script src='js/TweenMax.min.js'></script>

下面是實現旋轉動畫的js代碼：

var gaps=[];
var gapscnt=0;
var currentLevel=0;
var px=[0,0,0,0,0,0,0,0,0,0,0,0,0];
var vx=[0,0,0,0,0,0,0,0,0,0,0,0,0];
var    windowHalfX = window.innerWidth / 2;
var    windowHalfY = window.innerHeight / 2;
init()

function tickHandler() {
        //run your logic here...
        if(md){
            gap=averageGaps(mouseX-oldMouseX);
        }
        gap*=.9;
        vx[currentLevel]+=gap;
        oldMouseX = mouseX;
        var i;
        for ( i = currentLevel; i < numLevels; i++) {
            vx[i+1]+=((vx[i]-vx[i+1])/slow);
        }
        for ( i = currentLevel; i > 0; i--) {
            vx[i-1]+=(vx[i]-vx[i-1])/slow;
        }
        for ( i = 0; i <numLevels; i++) {
            px[i]+=(vx[i]-px[i]);
      // trying tweenmax duration 0 method of setting rotationY 
            TweenMax.to($('#level'+i), 0, {rotationY:px[i]});
        }
    }



// functions 
function init(){
    // code for cube
    var d=0.12;var p=3;
    for(var i=0;i<numLevels;i++){
        var posString="-115px "+(-48*i)+ "px";
        TweenMax.to($('#level'+i+' li'), 1, {css:{backgroundPosition: posString}, delay:(d*i)});}
    TweenLite.ticker.addEventListener("tick", tickHandler);
    $('.cube').mouseover(function(){
            TweenMax.to($('.face'),1,{opacity:1});
            });
    $('.cube').mouseout(function(){
            TweenMax.to($('.face'),1,{opacity:.85});
            });
    $(document).on('mousedown', function(event) {
            event.preventDefault();
            oldMouseX = mouseX;
            gaps.length = 0;
            md=true;
            }).on('mouseup', function(event) {
            md=false;
            }).on('mousemove', function(event) {
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
            });
  
 

  $('#level0').mousedown(function(){currentLevel=0; });
    $('#level1').mousedown(function(){currentLevel=1; });
    $('#level2').mousedown(function(){currentLevel=2; });
    $('#level3').mousedown(function(){currentLevel=3; });
    $('#level4').mousedown(function(){currentLevel=4; });
    $('#level5').mousedown(function(){currentLevel=5; });
    $('#level6').mousedown(function(){currentLevel=6; });
    $('#level7').mousedown(function(){currentLevel=7; });
    $('#level8').mousedown(function(){currentLevel=8; });
    $('#level9').mousedown(function(){currentLevel=9; });
    $('#level10').mousedown(function(){currentLevel=10; });
    $('#level11').mousedown(function(){currentLevel=11; });
    $('#level12').mousedown(function(){currentLevel=12; });  
  
  
  
  
  var touchEnabled = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if (touchEnabled == true) {
console.log("touchEnabled");
document.addEventListener('touchmove', onTouchMove, false);
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchend', onTouchEnd, false);
}
 
}


function onTouchMove(event) {
event.preventDefault();
var touch = event.touches[0];
mouseX = touch.pageX - windowHalfX;
mouseY = touch.pageY - windowHalfY;
}

function onTouchStart(event) {
event.preventDefault();
oldMouseX = mouseX;
gaps.length = 0;
md=true;
}

function onTouchEnd(event) {
event.preventDefault();
md = false;
}


    function averageGaps(n){
    if(isNaN(n)){    return 0;    }
    var gl=gaps.length;
    gaps[gapscnt]=n;
    var ave =0;
    for (var i = 0; i < gl; i++) {
        ave+=gaps[i];
    };
    gapscnt=(gapscnt+1)%10;
    var tmp=ave/gl;
    if(isNaN(tmp)){tmp=0;    }
    return tmp;
}

在TweenMax的幫助下，動畫實現簡單了不少。

最后附上我們可愛的源代碼，下載地址>>