玩转CSS3旋转3D（transform）

不支持opera =-=~!

HTML

<div class="contaner">
    <div class="box buddycloud">
        <h1>Pack</h1>
        <div class="stream" style="transform:rotateY(-3deg) rotateX(0deg);">
            <article class="topic" >
                 <img src="images/ds.jpg">
            </article >
        </div>
    </div>
</div>

 

CSS

/*折叠*/
.contaner{width:602px; height:auto; bottom:0; left:0; position:absolute;top:0; transform-style:preserve-3d; }
.buddycloud{ font:13px/19px "Helvetica Neue", Helvetica, Arial, sans-serif;transform-style: preserve-3d; }
.buddycloud h1{text-align:center}
.box{width:502px; height:auto; margin:0 auto; position:relative}
.box > h1{font-size:20px; color:rgba(123,123,123,0.5); text-shadow:0 1px rgba(255,255,255,.67); font-weight:bold;margin-top:40px}
.buddycloud .stream{margin:8px 0 21px 0; width:502px; border-radius:5px;  position:relative; transform-style:preserve-3d;}

 

JS，这里用到两个插件modernizr.custom和prefixfree.min（自动添加前缀）

<script type="text/javascript" src="js/prefixfree.min.js" language="javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.js" language="javascript"></script>

var mouse={startX:0,stratY:0};//定义初试坐标
var innerElement = $('.buddycloud .stream');//定义全局变量
var transformString = Modernizr.prefixed('transform');//引用插件，自动添加前缀
var inputDown, inputMove, inputUp;//定义全局变量

if (window.Touch) {//触摸模式
	inputDown = "touchstart";
	inputMove = "touchmove";
	inputUp = "touchend";
	//console.log("1");
}
else {
	//console.log("2");
	inputDown = "mousedown";
	inputMove = "mousemove";
	inputUp = "mouseup";
}



function normalizedX(event){//判断模式
	return window.Touch ? event.originalEvent.touches[0].pageX : event.pageX;
}	

function normalizedY(event){
	return window.Touch ? event.originalEvent.touches[0].pageY : event.pageY;
}

$(document).bind(inputDown, function(event){
	
  event.preventDefault();//防冒泡
  if(event.button === 2) return true; // right-click判断按键
  mouse.startX = normalizedX(event);
  mouse.startY = normalizedY(event);
  $(document)
   .bind(inputMove, move)
   .one(inputUp, function(){ $(document).unbind(inputMove); });
});

function move(event){
	//console.log("99");
  event.preventDefault();
  var offsetX = normalizedX(event) - mouse.startX;
  var offsetY = normalizedY(event) - mouse.startY;
  if(event.shiftKey){
	 // console.log("999")
   offsetX = roundToMultiple(offsetX, 15);
   offsetY = roundToMultiple(offsetY, 15);
  }
 // console.log(offsetX)
  $('.buddycloud .stream').css(transformString, 'rotateY('+offsetX+'deg) rotateX('+-offsetY+'deg)');//写入
}
function roundToMultiple(number, multiple){
  var value = number/multiple
  ,   integer = Math.floor(value)
  ,   rest = value - integer;
  return rest > 0.5 ? (integer+1)*multiple : integer*multiple;
}