css3实现3d相册旋转,3d旋转相册css代码
这篇博客的目的是因为之前HTML5 CSS3话题CSS3的吸引人的例子营造了百度贴吧的3D翻牌效果。关于CSS 3D效果有一个重要的知识点没有提到，就是透视和平移。
效果图：呵呵，把我大学毕业的一些照片做成旋转木马，围着我的文理大学转，不忘母校的恩情~
1、perspective
透视属性包括两个属性：无和带单位的长度值。
perspective属性的默认值为none，这意味着从无限的角度观看3D对象，但它看起来是平面的。另一个值length接受长度单位大于0的值。其单位不能是百分比值。长度值越大，角度看起来越远，从而产生相当低的强度和非常小的3D空间变化。相反，值越小，角度显得越近，从而产生高强度的角度和较大的3D变化。简单来说：透视设置长度时，越小，3D效果越明显，眼睛离3D物体越近，反之亦然。
2、transform: translateZ(length)
假设设置了perspective:300px，translateZ的值越小，子元素大小就越小。当设定值接近300px时，就好像这个元素就在眼前。当它超过300px时，它会在之前到达你视野的后面，元素就看不见了。
上例的核心：
1.首先，图片的所有容器都是position:absolute，叠加在一起，然后设置rotateY为40*i，i=0，1，2.一次9个；所有的图片会交叉成一个花一样的形状。
2.然后为每张图片的容器设置translateZ。所有的图片都会从相应的角度向外移动，展开成一个大圈，就是上图的效果。
html:
！DOCTYPE html html head title/title meta charset= utf-8 /link href= CSS/reset . CSS rel= style sheet type= text/CSS /script type= text/JavaScript src=././jquery-1.8.3.js/script脚本类型= text/JavaScript //alert(64/Math . tan(20/180 * Math。PI))；var transform=function (element，value，key){ key=key Transform ；[Moz ， O ， Ms ， Webkit ， ]。forEach(function(prefix){ element . style[前缀关键字]=value；});返回元素；} $(function () { var deg=-40，I=1；$(#container )。click(function(){ transform($(this)[0]， rotateY((deg * I) deg)))；});/script/head body div id= stage ul id= container Li img src= img/1 . jpg /span一次做一件事，并且做好./span/Li Li img src= img/2 . jpg /span一次只做一件事，并且做好./span/Li Li img src= img/3 . jpg /span坚持下去，永不放弃。/span/Li Li img src= img/4 . jpg /span任何值得做的事都值得做好。/span/Li Li img src= img/5 . jpg /span相信自己。/span/Li Li img src= img/6 . jpg /span行动胜于雄辩。不要把今天能做的事推到明天。/span/Li Li img src= img/8 . jpg /span样样精通，样样不精通。/span/Li Li img src= img/9 . jpg /span不要以貌取人。/span /li /ul /div /body /html CSS:
李{宽度：128pxbox-shadow: 0 1px 3px rgba(0，0，0，5);位置：绝对；底部：0;}李img { width:128 px；方框阴影：0 1px 3px rgba(0，0，0，5);垂直对齐：居中；}李span {显示：块；宽度：128像素文本对齐：居中；颜色：# 333;字体大小：8px } #阶段{宽度：900像素最小高度：100像素左边距：自动；右边距：自动；填充：100像素50像素-网络工具包-视角：1200像素位置：相对；} #容器{ background:URL( img/xawl。jpg’)无重复0 0;边距-顶部：200像素宽度：128pxbox-shadow: 0 1px 3px rgba(0，0，0，5);高度：100像素左边距：-64px；-WebKit-transition:-WebKit-transform 1s；过渡：转换1s；-WebKit-transform-style:preserve-3d；位置：绝对；左：50%;} Li:n-child(0){-WebKit-transform:rotateY(0 deg)translate z(300 px)；} Li:n-child(1){-WebKit-transform:rotateY(40 deg)translate z(300 px)；} Li:n-child(2){-WebKit-transform:rotateY(80 deg)translate z(300 px)；} Li:n-child(3){-WebKit-transform:rotateY(120 deg)translate z(300 px)；} Li:n-child(4){-WebKit-transform:rotateY(160 deg)translate z(300 px)；} Li:n-child(5){-WebKit-transform:rotateY(200 deg)translate z(300 px)；} Li:n-child(6){-WebKit-transform:rotateY(240 deg)translate z(300 px)；} Li:n-child(7){-WebKit-transform:rotateY(280 deg)translate z(300 px)；} Li:n-child(8){-WebKit-transform:rotateY(320 deg)translate z(300 px)；} Li:n-child(9){-WebKit-transform:rotateY(360 deg)translate z(300 px)；}部门#阶段作为舞台，设置视角，每个里分别设置罗泰，以及翻译然后我们会div #容器设置了-WebKit-transform-style:preserve-3d；变换样式：平面保留-3d其中平的值为默认值，表示所有子元素在2D平面呈现保留-3d表示所有子元素在三维(三维的缩写)空间中呈现。如果对一个元素设置了转换样式的值为保留-3d，它表示不执行平展操作，他的所有子元素位于三维(三维的缩写)空间中。一般情况下，此属性用于三维(三维的缩写)动画效果的执行元素，即就是它要应用三维(三维的缩写)动画效果，所以它的子元素都应该在三维(三维的缩写)空间。
有一点要注意：本例子，其实正在的动画效果，在于鼠标点击，div #容器在不端的改变罗泰，所有的图片元素均在div #容器中，且已经展现为旋转木马效果，现在要做的就是旋转这个木马，所以只需要每次改变div #容器的旋转40度角度即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。