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

一个简单的例子,扫起

demo下在地址    https://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效果更好




翻页




风车



一些问题

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

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

posted on 2015-02-10 19:05  wtcsy  阅读(2019)  评论(0编辑  收藏  举报