CSS3流畅旋转幻灯片效果

​页面中用的一些图片

​相关软件 

​html:代码很简单​

​css代码：没有什么难度只是用到了一个阴影效果 body{color:#999;font:15px Calibri,Arial,sans-serif;border:1px solid transparent;}/* Styling the slideshow */#slideShowContainer{width:510px;height:510px;position:relative;margin:120px auto 50px;}#slideShow{position:absolute;height:490px;width:490px;background-color:#fff;margin:10px 0 0 10px;z-index:100;  -moz-box-shadow:0 0 10px #111; -webkit-box-shadow:0 0 10px #111; box-shadow:0 0 10px #111;}#slideShow ul{position:absolute;top:15px;right:15px;bottom:15px;left:15px;list-style:none;overflow:hidden;}#slideShow li{position:absolute;top:0;left:0;width:100%;height:100%;}#slideShowContainer > a{border:none;text-decoration:none;text-indent:-99999px;overflow:hidden;width:36px;height:37px;background:url('../img/arrows.png') no-repeat;position:absolute;top:50%;margin-top:-21px;}#previousLink{left:-38px;}#previousLink:hover{background-position:bottom left;}a#nextLink{right:-38px;background-position:top right;}#nextLink:hover{background-position:bottom right;}/* General styles */.note{margin-bottom:40px;text-align:center;}.credit{font-size:12px;}.credit a{color:#bbb !important;}a, a:visited {text-decoration:underline;outline:none;color:#97CAE6;}a:hover{text-decoration:none;}

​js有点复杂了：(function($) {  var div = document.createElement('div'),  divStyle = div.style,  support = $.support;support.transform =   divStyle.MozTransform === ''? 'MozTransform' :  (divStyle.MsTransform === ''? 'MsTransform' :  (divStyle.WebkitTransform === ''? 'WebkitTransform' :   (divStyle.OTransform === ''? 'OTransform' :  false)));support.matrixFilter = !support.transform && divStyle.filter === '';div = null;$.cssNumber.rotate = true;$.cssHooks.rotate = {  set: function( elem, value ) {    var _support = support,      supportTransform = _support.transform,      cos, sin,      centerOrigin;        if (typeof value === 'string') {      value = toRadian(value);    }        $.data( elem, 'transform', {      rotate: value    });    if (supportTransform) {      elem.style[supportTransform] = 'rotate('+ value +'rad)';          } else if (_support.matrixFilter) {      cos = Math.cos(value);      sin = Math.sin(value);      elem.style.filter = [        "progid:DXImageTransform.Microsoft.Matrix(",          "M11="+cos+",",          "M12="+(-sin)+",",          "M21="+sin+",",          "M22="+cos+",",          "SizingMethod='auto expand'",        ")"      ].join('');      // From pbakaus's Transformie http://github.com/pbakaus/transformie      if(centerOrigin = $.rotate.centerOrigin) {        elem.style[centerOrigin == 'margin' ? 'marginLeft' : 'left'] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";        elem.style[centerOrigin == 'margin' ? 'marginTop' : 'top'] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";      }    }  },  get: function( elem, computed ) {    var transform = $.data( elem, 'transform' );    return transform && transform.rotate? transform.rotate : 0;  }};$.fx.step.rotate = function( fx ) {  $.cssHooks.rotate.set( fx.elem, fx.now+fx.unit );};function radToDeg( rad ) {  return rad * 180 / Math.PI;}function toRadian(value) {  if(value.indexOf("deg") != -1) {    return parseInt(value,10) * (Math.PI * 2 / 360);  } else if (value.indexOf("grad") != -1) {    return parseInt(value,10) * (Math.PI/200);  }  return parseFloat(value);}$.rotate = {  centerOrigin: 'margin',  radToDeg: radToDeg};  })(jQuery); $(document).ready(function(){  var slideShow = $('#slideShow'),  ul = slideShow.find('ul'),  li = ul.find('li'),  cnt = li.length;  // As the images are positioned absolutely, the last image will be shown on top. // This is why we force them in the correct order by assigning z-indexes: updateZindex(); if($.support.transform){  // Modern browsers with support for css3 transformations  li.find('img').css('rotate',function(i){   // Rotating the images counterclockwise   return (-90*i) + 'deg';  });  // Binding a custom event. the direction and degrees parameters  // are passed when the event is triggered later on in the code.   slideShow.bind('rotateContainer',function(e,direction,degrees){      // Enlarging the slideshow and photo:   slideShow.animate({    width  : 510,    height  : 510,    marginTop : 0,    marginLeft : 0   },'fast',function(){    if(direction == 'next'){         // Moving the topmost image containing Li at     // the bottom after a fadeOut animation          $('li:first').fadeOut('slow',function(){      $(this).remove().appendTo(ul).show();      updateZindex();     });    }    else {          // Showing the bottomost Li element on top      // with a fade in animation. Notice that we are     // updating the z-indexes.          var liLast = $('li:last').hide().remove().prependTo(ul);     updateZindex();     liLast.fadeIn('slow');    }        // Rotating the slideShow. css('rotate') gives us the    // current rotation in radians. We are converting it to    // degress so we can add 90 or -90 to rotate it to its new value.        slideShow.animate({         rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'    },'slow').animate({     width  : 490,     height  : 490,     marginTop : 10,     marginLeft : 10    },'fast');   });  });    // By triggering the custom events below, we can   // show the previous / next images in the slideshow.  slideShow.bind('showNext',function(){   slideShow.trigger('rotateContainer',['next',90]);  });  slideShow.bind('showPrevious',function(){   slideShow.trigger('rotateContainer',['previous',-90]);  }); } else{  // Fallback for Internet Explorer and older browsers  slideShow.bind('showNext',function(){   $('li:first').fadeOut('slow',function(){    $(this).remove().appendTo(ul).show();    updateZindex();   });  });  slideShow.bind('showPrevious',function(){   var liLast = $('li:last').hide().remove().prependTo(ul);   updateZindex();   liLast.fadeIn('slow');  }); } // Listening for clicks on the arrows, and // triggering the appropriate event.  $('#previousLink').click(function(){  if(slideShow.is(':animated')){   return false;  }  slideShow.trigger('showPrevious');  return false; }); $('#nextLink').click(function(){  if(slideShow.is(':animated')){   return false;  }  slideShow.trigger('showNext');  return false; }); // This function updates the z-index properties. function updateZindex(){    // The CSS method can take a function as its second argument.  // i is the zero-based index of the element.    ul.find('li').css('z-index',function(i){   return cnt-i;  }); } });

​下面看一下最终效果吧​，当点击左右切换时图片会变化位置的哦

​这个是正常效果