perspective 的笔记

最新推荐文章于 2024-06-30 13:26:51 发布

apr40151

最新推荐文章于 2024-06-30 13:26:51 发布

阅读量175

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/wtcsy/p/perspective.html

版权

以前看到别人做的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效果更好

翻页

<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="左翻一页" οnclick="xx()">　　<input type="button" value="右翻一页" οnclick="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>

风车

一些问题

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

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

转载于:https://www.cnblogs.com/wtcsy/p/perspective.html

apr40151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
perspective 的笔记

以前看到别人做的banner图,3d变化,很羡慕啊,一直不知道怎么做,直到看到了这个样式perspective,然后就知道怎么实现了一个简单的例子,扫起demo下在地址 http://files.cnblogs.com/files/wtcsy/demoxx.rarperspectiveperspective 属性定义 3D 元素距视图的距离，以像素计...
复制链接

扫一扫