perspective 的笔记

zoukankan html css js c++ java

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比较好的资料

先理解下x,y,z轴

理解perspective

理解perspective下的旋转

一些demo

一些问题

看过的一些介绍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效果更好
<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{ 200px; height: 320px; margin:50px auto; padding: 20px 0; position: relative; overflow: hidden;background: #000; -webkit-perspective:1200px; -moz-perspective:1200px; -ms-perspective:1200px; -o-perspective:1200px; } .list{ 200px; height: 320px; position: absolute;left: 0;top: 20px; -webkit-transform:rotateY(-90deg); -moz-transform:rotateY(-90deg); -ms-transform:rotateY(-90deg); -o-transform:rotateY(-90deg); } .list img{height: 100%; 100%;} .curr{display: block; -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform:rotateY(0deg); -o-transform:rotateY(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; 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; if(i>15){ var other = curr==3?0:curr+1 //$("#a"+other).css("-webkit-transform","rotateY("+(a2deg+step*i*2-90)+"deg) ").show(); //$("#a"+curr).css("-webkit-transform","rotateY("+(-90)+"deg) ").hide(); css($("#a"+other),"transform","rotateY("+(a2deg+step*i*2-90)+"deg)") $("#a"+other).show(); css($("#a"+curr),"transform","rotateY("+(-90)+"deg)") $("#a"+curr).hide(); }else{ $("#a"+curr).show() css($("#a"+curr),"transform","rotateY("+(a1deg+step*i*2)+"deg)") } 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{ 200px; height: 320px; margin:50px auto; padding: 20px; position: relative; overflow: hidden;background: #000;} .list{ 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%; 200%;} .l{height: 320px; 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; 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; 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>

风车
<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{ 200px; height: 320px; margin:50px auto; position: relative; overflow: hidden;background: #000} .list{ 200px; height: 320px; position: absolute;left: 0;top: 0; -webkit-transform:rotateZ(-90deg); -ms-transform:rotateZ(-90deg); -o-transform:rotateZ(-90deg); -moz-transform:rotateZ(-90deg); -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; -o-transform-origin:left bottom; -moz-transform-origin:left bottom; } .list img{height: 100%; 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; 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并不是这么写的,原理不明白?求解

查看全文

相关阅读:
代码中日志的使用
 MySQL数据库(3)----设置和使用自定义变量
 MySQL数据库(2)----检索信息
 MySQL数据库(1)----入门级操作
 Apache服务器运维笔记(6)----目录文件网络容器的安全问题
 Apache服务器运维笔记(5)----容器的处理顺序
 CentOS7 下安装 SublimeText3
Apache服务器运维笔记(4)----服务器扩展部分
 Apache服务器运维笔记(3)----容器部分
 KMP算法的一个简单实现

原文地址：https://www.cnblogs.com/wtcsy/p/perspective.html

perspective 的笔记

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

先理解下x,y,z轴

如何理解perspective

理解perspective下的旋转

一些demo

一些问题