3D相册js(3D相册软件)
js插件3d图片轮播，可以控制图片数量的(只有四张图片)
漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D
动画效果，支持事件Callback调用，支持参数自定义配置，如：
speed：600 切换速度、autoplay:true
是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到3D特效！
网页中的照片墙怎么制作？
Ge1doot.js超酷3D立体照片墙
查看源代码以及演示请登录：
HTML
canvas?id="canvas"/canvas
引入ge1doot.js3D相册插件
script?type="text/javascript"?src="js/ge1doot.js"/script
自定义图片代码，大约在index.html第260行
imgdata:[?
????//?north?
????{img:?'imgs/1.jpg',?x:?-1000,?y:?0,?z:?1500,?nx:?0,?nz:?1},?
????{img:?'imgs/2.jpg',?x:?0,?y:?0,?z:?1500,?nx:?0,?nz:?1},?
????{img:?'imgs/3.jpg',?x:?1000,?y:?0,?z:?1500,?nx:?0,?nz:?1},?
]
html5 3d旋转相册代码怎么用
以下是代码：
!DOCTYPE html
html
head
titletransform-style实现Div的3D旋转-柯乐义/title
style
*{font-size: 24px;color: #00ff00; padding:0; margin:0;}
#container {
position: relative;
height: 300px;
width: 300px;
-webkit-perspective: 500;
margin-top: 200px;
margin-right: auto;
margin-left: auto;
}
#parent-keleyi-com {
margin: 10px;
width: 280px;
height: 280px;
background-color: #666;
opacity: 0.3;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 15s infinite linear;
}
#parent-keleyi-com div {
position: absolute;
top: 40px;
left: 40px;
width: 280px;
height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
}
#parent-keleyi-com :first-child {
background-color: #000;
-webkit-transform: translateZ(-100px) rotateY(45deg);
}
#parent-keleyi-com :last-child {
background-color: #333;
-webkit-transform: translateZ(50px) rotateX(20deg);
-webkit-transform-origin: 50% top;
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
/style
/head
body
div请使用支持CSS3的浏览器a href="" target="_blank"原文/a/div
div id="container"
div id="parent-keleyi-com"
diva href="/"柯乐义/a/div
diva href="/"keleyi.com/a/div
/div
/div
/body
/html
