不支持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;
}