perspective 的笔记

以前看到别人做的banner图,3d变化,很羡慕啊,一直不知道怎么做,直到看到了这个样式perspective,然后就知道怎么实现了

一个简单的例子,扫起

demo下在地址 http://files.cnblogs.com/files/wtcsy/demoxx.rar

perspective

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

从w3school上抄的一段话,我也是这么理解的....　　　地址 http://www.w3school.com.cn/cssref/pr_perspective.asp

看过的一些介绍perspective比较好的资料

看过的一些介绍perspective比较好的资料

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

先理解下x,y,z轴

x就是水平方向，比如x轴方向旋转,就是设置rotateX

y就是垂直方向，比如y轴方向旋转,就是设置rotateY

z就是由电脑屏幕到人脸的那个方向，比如z轴方向旋转,就是设置rotateZ

如何理解perspective

上面的书面定义,其实也不是那么好理解,如果以一些例子来理解可能就简单很多了

先要理解透视点是在浏览器的前方

比如定义了一个div,假如叫vv吧，设置vv的perspective的样式,它的值是1200px;

然后设置vv的translateZ (前提要理解 x,y,z轴,translateX ,translateY ,translateZ 才方便理解perspective )

在translateZ(0)的时候,可以理解为vv到透视点的距离是1200px,这时他的大小(就是宽高,跟不设置perspective是一样的)

如果把vv设置成translateZ(600px),就会发现vv变大了,vv到透视点的距离就是600px了.就好像到一张纸,在你眼前1米的时候比较小,但是到了0.1米的时候比较大

当vv到了translateZ(1200px)的时候,vv就不见了,也好理解,跟眼睛在一起了,看不到了

这是张鑫旭写的例子, 直接拿过来用

http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html

理解perspective下的旋转

如果设置只是设置了rotateX(rotateY,rotateZ)的旋转还是很好理解的,但是加上了perspective后,就难一点点了

比如设置div绕y轴方向旋转,设置了perspective为1200px,然后再设置translateZ(600px),那div就以100px的距离绕y轴旋转

我擦

如果设置div绕x轴方向旋转,设置了perspective为1200px,然后再设置translateZ(600px),那div就以100px的距离绕x轴旋转

我擦

一些demo

手机页面切换一般都一些效果可以选择，我的手机上就有这些效果,风车,方盒,旋转,翻页

方盒

就是那个二维码了

主要是通过图片宽度的一半当成translateZ,然后计算缩放的大小

旋转

这个就是rotateY,加了perspective,3d效果更好

}
setTimeout(function(){my()},16)
}
});
</script>
</body>
</html>

翻页

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>wo ca!!!!!</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
*{margin:0;padding:0;}
body{background: #000}
.warp{width: 200px; height: 320px; margin:50px auto; padding: 20px; position: relative; overflow: hidden;background: #000;}
.list{width: 200px; height: 320px; position: absolute;left: 20px;top: 20px;display: none;
-webkit-perspective:1200px;
-ms-perspective:1200px;
-o-perspective:1200px;
-moz-perspective:1200px;
}
.list img{height: 100%; width: 200%;}
.l{height: 320px; width: 100px; display:inline-block; overflow: hidden;
-webkit-transform:rotateY(0deg) ;
-ms-transform:rotateY(0deg) ;
-o-transform:rotateY(0deg) ;
-moz-transform:rotateY(0deg) ;
-webkit-transform-origin:right center;
-ms-transform-origin:right center;
-o-transform-origin:right center;
-moz-transform-origin:right center;
}
.r{height: 320px; width: 100px; display:inline-block;overflow: hidden;
-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-webkit-transform-origin:left center;
-ms-transform-origin:left center;
-o-transform-origin:left center;
-moz-transform-origin:left center;
}
.r>img{margin-left: -100px;}
.curr{ z-index: 10; display: block;}
</style>
<body>
<div id="con" class="warp">
<div id="a0" class="list curr">
<div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div>
</div>
<div id="a1" class="list">
<div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div>
</div>
<div id="a2" class="list">
<div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div>
</div>
<div id="a3" class="list">
<div class="l"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div><div class="r"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div>
</div>
</div>
<br>
<div style="margin:20px auto; width:200px;">
<input type="button" value="左翻一页" onclick="xx()">　　<input type="button" value="右翻一页" onclick="yy()">
</div>
<script src="http://files.cnblogs.com/files/wtcsy/zepto.js"></script>
<script>
$(function($){
var curr = 0;
var i=0;
var num = 30
var step = 90/num;
var a1deg = 0;
var a2deg = -90;
function css($dom,cssNname,value){
var obj={}
obj["-o-"+cssNname] = value;
obj["-webkit-"+cssNname] = value;
obj["-moz-"+cssNname] = value;
obj["-ms-"+cssNname] = value;
$dom.css(obj)
}
window.xx = function(){
if(i==num){
if(curr==3){
curr=0;
}else{
curr+=1;
}
i=0;
return;
}
i++;
var my = arguments.callee;
var $currP = $("#a"+curr),
$currL = $currP.find(".l"),
$currR = $currP.find(".r"),
other = curr==3?0:curr+1,
$nextP = $("#a"+other).show(),
$nextL = $nextP.find(".l"),
$nextR = $nextP.find(".r");
if(i<=15){
//$currL.css("-webkit-transform","rotateY("+(a1deg+step*i*2)+"deg)");
css($currL,"transform","rotateY("+(a1deg+step*i*2)+"deg)")
if(i==15){
$currP.removeClass("curr").show();
$nextP.addClass("curr");
//$nextR.css("-webkit-transform","rotateY("+(-90)+"deg)");
css($nextR,"transform","rotateY("+(-90)+"deg)")
}
}else{
//$nextR.css("-webkit-transform","rotateY("+(a2deg+step*i*2-90)+"deg)");
css($nextR,"transform","rotateY("+(a2deg+step*i*2-90)+"deg)")
if(i==30){
$currP.hide();
//$currL.css("-webkit-transform","rotateY("+(0)+"deg)");
css($currL,"transform","rotateY("+(0)+"deg)")
}
}
setTimeout(function(){my()},16);
}
window.yy = function(){
if(i==num){
if(curr==0){
curr=3;
}else{
curr-=1;
}
i=0;
return;
}
i++;
var my = arguments.callee;
var $currP = $("#a"+curr),
$currL = $currP.find(".l"),
$currR = $currP.find(".r"),
other = curr==0?3:curr-1,
$nextP = $("#a"+other).show(),
$nextL = $nextP.find(".l"),
$nextR = $nextP.find(".r");

if(i<=15){
//$currR.css("-webkit-transform","rotateY("+(a1deg-step*i*2)+"deg)");
css($currR,"transform","rotateY("+(a1deg-step*i*2)+"deg)")
if(i==15){
$currP.removeClass("curr").show();
$nextP.addClass("curr");
//$nextL.css("-webkit-transform","rotateY("+(90)+"deg)");
css($nextL,"transform","rotateY("+(90)+"deg)")
}
}else{
//$nextL.css("-webkit-transform","rotateY("+(90-step*(i-15)*2)+"deg)");
css($nextL,"transform","rotateY("+(90-step*(i-15)*2)+"deg)")
if(i==30){
$currP.hide();
//$currR.css("-webkit-transform","rotateY("+(0)+"deg)");
//$currL.css("-webkit-transform","rotateY("+(0)+"deg)");
css($currR,"transform","rotateY("+(0)+"deg)")
css($nextL,"transform","rotateY("+(0)+"deg)")
}

}
setTimeout(function(){my()},16);
}
});
</script>
</body>
</html>

风车

}
.list img{height: 100%; width: 100%;}
.curr{
-webkit-transform:rotateZ(0deg);
-ms-transform:rotateZ(0deg);
-o-transform:rotateZ(0deg);
-moz-transform:rotateZ(0deg);
}
</style>
<body>
<div id="con" class="warp">
<div id="a0" class="list curr"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_1.jpg" alt=""></div>
<div id="a1" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_2.jpg" alt=""></div>
<div id="a2" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_3.jpg" alt=""></div>
<div id="a3" class="list"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/659251/o_4.jpg" alt=""></div>
</div>
<br>
<div style="margin:20px auto; width:200px;">
<input type="button" value="xxxx" onclick="xx()">
</div>
<script src="http://files.cnblogs.com/files/wtcsy/zepto.js"></script>
<script>
$(function($){
var curr = 0;
var i=0;
var num = 30
var step = 90/num;
var a1deg = 0;
var a2deg = -90;
function css($dom,cssNname,value){
var obj={}
obj["-o-"+cssNname] = value;
obj["-webkit-"+cssNname] = value;
obj["-moz-"+cssNname] = value;
obj["-ms-"+cssNname] = value;
$dom.css(obj)
}
window.xx = function(){
if(i==num){
if(curr==3){
curr=0;
}else{
curr+=1;
}
i=0;
return;
}
i++;
var my = arguments.callee;
//$("#a"+curr).css("-webkit-transform","rotateZ("+(a1deg+step*i)+"deg)");
css($("#a"+curr),"transform","rotateZ("+(a1deg+step*i)+"deg)")
var other = curr==3?0:curr+1
//$("#a"+other).css("-webkit-transform","rotateZ("+(a2deg+step*i)+"deg)");
css($("#a"+other),"transform","rotateZ("+(a2deg+step*i)+"deg)")
setTimeout(function(){my()},16)
}
});
</script>
</body>
</html>

一些问题

在左右滑动的时候,如何避免上下的滑动了(ps:当直接上下滑动的时候,应该让其上下滑动)

这里我用的是阻止事件默认行为,但是我看别人写的banner并不是这么写的,原理不明白?求解