3d相册弹出效果01
效果图：
效果描述：图片一张张从中间的一个图片相框中弹出，然后排布成圆形，鼠标拖拽，图片跟着动。
常规网页中，鼠标点击拖动的效果是：选中网页上的文字或者图片。
而我们需要的是：鼠标点击拖动网页，相册整体跟随鼠标移动。
这时，就需要禁止掉网页默认的鼠标选中属性。解决方案为：在<html>标签中加入 onselectstart =”return false” 即：<html onselectstart = “return false”>
制作该相册的步骤：
1. 编写html代码，将页面需要的元素添加完成。index.html
2. 编写css代码，修饰页面元素。3dpic.css
a: 如要对子元素进行3d变化，则需在父元素中设定变换的风格为：3d风格， 同时设定页面的视角为800px（一般设定为800-1000px）
做法： transform-style: preserve-3d; perspective: 800px;
3. 编写js代码，实现一些动态的变换。3dTranslatePic.js
var imgsNum = $(".container ul li img").length; //相册中总的图片数
var Deg = 360/imgsNum; //最小旋转的角度
图片先旋转，然后沿Z轴平移，旋转之后，Z轴的方向为垂直图片向外，并非垂直屏幕向外。
最后，在css中，改变盛放相册的盒子（父元素div=”container”）的视角，使之向下倾斜
transform: rotateX(-15deg)
这样基本的图片散开3d效果模型就完成了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
