H5 + C3如何实现旋转木马相册的功能?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
效果图:嘿嘿,我把大学毕业时的一些照片,做成旋转木马,绕着我大文理旋转,不忘母校的培育之恩~
<强> 1,角度看
角度属性包括两个属性:没有和具有单位的长度值。
其中透视属性的默认值为none,表示无限的角度来看3 d物体,但看上去是平的。另一个值& lt; length>接受一个长度单位大于0的值,而且其单位不能为百分比值。你们;length>值越大,角度出现的越远,从而创建一个相当低的强度和非常小的3 d空间变化。反之,此值越小,角度出现的越近,从而创建一个高强度的角度和一个大型3 d变化。简单一点说:当角度设置长度时,如果越小则表示3 d效果越明显,你的眼睛就越靠近3 d物体,反之则反之。
<强> 2,变换:translateZ(长度)
假设设置了观点:300 px时,设置translateZ的值越小则子元素大小越小,当设置值接近300 px时,则仿佛此元素在面前,当超过300 px以后,则以前到达你视野的后面,该元素就不可见了。
<强>上例的核心:
1,首先所有的图片的容器位置:绝对的,叠加在一起,然后一次设置rotateY分别为40 *我,我=0,1、2……9,所有图片会相交成一个类似花的形状
2,然后为每个图片的容器设置translateZ,所有图片会从对应的角度向外移动,扩展成一个大的圆,即上图效果。
html:
