『壹』 如何使用javascript实现网页上相册的3D特效

<html>
<head>
</head>
<body>
<script type="text/javascript">
var createDiv = document.createElement("div");
//createDiv.innerHTML = "adasas"
createDiv.style.height = "122px";
createDiv.style.width = "122px";
document.body.appendChild(createDiv);
createDiv.style.position = "absolute";
createDiv.style.overflow = "hidden";
createDiv.style.top = "200px";
createDiv.style.left = "200px";

var createImg = document.createElement("img");
createImg.setAttribute("src","https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif");
createImg.height = 122;
createImg.width = 122;
createDiv.appendChild(createImg);

var isenlarge = 0;
createImg.onmouseover = function()
{
isenlarge = 1;
enlarge();
};
createImg.onmouseout = function()
{
isenlarge = 0;
narrow();

};

var w = 122;
var h = 122;
var a = 0;

var ctr1 = setInterval("move()",17);

function move()
{
if ( a >= 90 && a <= 270)
{
w > 80 ? w-- : 0;
h > 80 ? h-- : 0;
}
else
{
w < 130? w++ : 0;
h < 130? h++ : 0;
}
createDiv.style.height = h;
createDiv.style.width = w;
createImg.height = h;
createImg.width = w;
createDiv.style.top = 500 + Math.sin( a * 0.017453293) * 100;
createDiv.style.left = 400 + Math.cos( a * 0.017453293) * 300 ;
a += 1;
a >= 360? a = 0 : 0;
}
function enlarge()
{
if ( createImg.height < 250 && createImg.width < 250 && isenlarge == 1 )
{
clearInterval( ctr1);
createImg.height += 3;
createImg.width += 3;
createDiv.style.height = createImg.height;
createDiv.style.width = createImg.width;
setTimeout( "enlarge()", 30);
}
}
function narrow()
{
if ( createImg.height > h && createImg.width > w && isenlarge == 0)
{
createImg.height -= 3;
createImg.width -= 3;
createImg.height < h? createImg.height = h : 0;
createImg.width < w? createImg.width = w : 0
createDiv.style.height = createImg.height;
createDiv.style.width = createImg.width;
setTimeout( "narrow()", 30);
}
else
{
ctr1 = setInterval("move()",17);
}
}
</script>
</body>
</html>
IE下目测没问题吧，我写的不规范的。。外观也很丑- -！

『贰』 网页产品展示3D效果是怎么做到的

研究下VRML吧，真正的网页3D

『叁』 HTML5如何在网页中实现3D效果

CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。

三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。

触发方法1：告知浏览器变形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。

Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。

触发方法2：直接使用CSS3变形语法

<!DOCTYPEhtml>
<head>
<metacharset="UTF-8">
<title>言成科技/title>
<style>
.box1{
width:150px;
height:150px;
border:2pxsolidblue;
}
.box1div{
height:150px;
background:rgba(0,0,0,0.5);
-webkit-transform:translate3d(30px,60px,20px)rotateX(30deg);
transform:translate3d(30px,60px,20px)rotateX(30deg);
}
</style>
</head>
<body>
<divclass="box1">
<div></div>
</div>
</body>
</html>

3D效果制作-目标效果图

以上资料来源：《HTML5布局之路》

『肆』 网页能做成3D展示效果吗

老子云web3D展示技术可以实现网页3D展示，而且展示效果非常好，他们手机官网有不少展示案例，你可以上网先看看。

『伍』 有没有下载3d特效素材的网站，目前需要一些游戏技能特效，求网址推荐

素材巷很不错呢，好多游戏技能特效的资源都免费素材巷