『壹』 如何使用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特效素材的網站，目前需要一些游戲技能特效，求網址推薦

素材巷很不錯呢，好多游戲技能特效的資源都免費素材巷