Powerful! HTML5 3D beauty image rotation implementation tutorial

Over the weekend, I want to get some HTML5 special effects to play with. Today I want to make some fun of HTML5 3D image special effects. The pictures are divided into small rectangles in the vertical direction, drag the mouse over the image to make every small rectangle rotate, so that the image can form a 3D effect. Let's take a look:

You can also see the DEMO here.

Next we will analyze the source code for implementing this HTML5 3D image rotation effect. Here we reference the well-known JS animation framework TweenMax. js.

Let's take a look at the HTML code:

<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>

Here we can see that we use n ul to divide the image into n small rectangles. For convenience of subsequent js calls, we will mark these ul as level-n.

Then let's take a look at the CSS code. Here we mainly introduce this beautiful image, haha.

.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);}

Finally, Javascript code. Here we introduce jQuery and the animation engine TweenMax. js:

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

The following is the js Code for rotating an animation:

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;}

With the help of TweenMax, animation implementation is much simpler.

At last, we attached our lovely source code,>