純HTML是無法做程序的，只能用來做頁面布局的靜態(tài)網(wǎng)頁。如果是要做CS、魔獸這類的3D網(wǎng)游，網(wǎng)頁版的不好做，現(xiàn)今網(wǎng)頁3D行業(yè)還不發(fā)達，目前幾乎無法完成這么大型的3D flash開發(fā)，LZ還是去了解一些網(wǎng)絡(luò)游戲的開發(fā)流程吧，首先需要一個游戲引擎，可以購買或者自己開發(fā)，還是建議購買，業(yè)界已經(jīng)有很成熟的引擎了，自己開發(fā)雖然可以很靈活，但是成本、時間耗費會非常大，然后需要組織程序團隊負責程序，頁面特效的負責頁面特效，關(guān)卡師設(shè)計關(guān)卡，還需要一批測試工程師完成后期的測試..相對來說是一個比較復雜的流程，但是只要每個環(huán)節(jié)把握好，網(wǎng)絡(luò)游戲開發(fā)也并不是那么神秘的，望LZ多多了解后再做市場調(diào)查，而后再組織一批架構(gòu)工程師搭建架構(gòu)和開發(fā)團隊，望采納
成都創(chuàng)新互聯(lián)公司專注于通海企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城開發(fā)。通海網(wǎng)站建設(shè)公司,為通海等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
我寫了個正方體的模板，你可以按照你想要的把每個面旋轉(zhuǎn)不同角度就行了
style?type="text/css"
html{
font-size:62.5%;
}
img{
width:300px;
height:300px;
}
#stage{
margin-top:200px;
margin-left:auto;
margin-right:auto;
width:300px;
height:300px;
perspective:1200px;
font-size:5em;
font-weight:bold;
color:#cc00ff;
}
.cube{
position:relative;
transform:rotateX(-45deg)?rotateY(45deg);
transform-style:preserve-3d;
transition:?all?.6s;
}
.side{
color:blue;
text-align:center;
width:300px;
height:300px;
line-height:300px;
position:absolute;
background:#cc66ff;
opacity:0.5;
border:1px?solid?rgba(117,4,24,0.5);
??}
?.front{
transform:translateZ(150px);
?}
?.back{
transform:rotateY(180deg)?translateZ(150px);
?}
?.left{
transform:rotateY(-90deg)?translateZ(150px);
?}
?.right{
transform:rotateY(90deg)?translateZ(150px);
?}
?.top{
transform:rotateX(90deg)?translateZ(150px);
?}
?.bottom{
transform:rotatex(-90deg)?translateZ(150px);
?}
#stage:hover?.cube{
transform:rotateX(-45deg)?rotateY(225deg);
transition:transform?.6s;
}
/style
/head
body
div?id="stage"
div?class="cube"
div?class="side?front"img?src="6.gif"?alt=""?//div
div?class="side?back"img?src="2.jpg"?alt=""?//div
div?class="side?left"img?src="3.jpg"?alt=""?//div
div?class="side?right"img?src="4.jpg"?alt=""?//div
div?class="side?top"img?src="5.jpg"?alt=""?//div
div?class="side?bottom"img?src="1.jpg"?alt=""?//div
/div
/div
/body
你的3D文件是否是3DMAX之類做出來的？如果是的話直接可以通過3dmax導出3d模型(obj文件)，然后可以下載第三方的瀏覽器3D引擎three.js，直接可以顯示這個3D文件
CSS3除了為開發(fā)者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。
三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過語法告知瀏覽器“請采用三維方式進行變形處理”，另一種方式是直接使用CSS3三維變形的語法。
觸發(fā)方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書寫-webkit-的前綴內(nèi)核。
Tips：不要為body元素設(shè)置-webkit- transform-style: preserve 3d,否則會對position:fixed定位的元素造成布局影響。在開發(fā)當中，如果當前元素屬于body的子級元素，又希望應(yīng)用三維變形，則在body和當前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應(yīng)用三維變形即可。
觸發(fā)方法2：直接使用CSS3變形語法
!DOCTYPE?html
head
meta?charset="UTF-8"
title言成科技/title
style
.box1?{
width:?150px;
height:?150px;
border:?2px?solid?blue;
}
.box1?div?{
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
div?class="box1"
div/div
/div
/body
/html
具體三維變形的具體屬性詳見《CSS3-3D相關(guān)知識詳解—視角以及變形方向》
3D效果制作
需求
制作一個立方體，并進行旋轉(zhuǎn)
代碼實例
!DOCTYPE?HTML
html
head
meta?charset="utf-8"?/
title言成科技/title
link?rel="stylesheet"?type="text/css"?href=""?/
style
.main-bac?{?-webkit-perspective:1500;?}?/*設(shè)定透視距離*/
.main{
width:200px;?
height:200px;?
margin:?0?auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform?2s?ease?0s;/*過渡時間*/
}
/*基本樣式*/
.main?p{
position:?absolute;?
margin:?0;?
padding:?0;?
width:?200px;?
height:?200px;??
text-align:?center;?
line-height:?200px;?
font-size:?26px;?
opacity:0.5;
}
/*將第一個元素Z軸向前移動100px，形成第一個面（正面）*/
.main?p:nth-of-type(1)?{
background-color:red;
-webkit-transform:translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/
.main?p:nth-of-type(2)?{
background-color:orange;?
-webkit-transform:rotateX(90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/
.main?p:nth-of-type(3)?{
background-color:yellow;
-webkit-transform:rotateX(-90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/
.main?p:nth-of-type(4)?{
background-color:green;
-webkit-transform:rotateY(90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/
.main?p:nth-of-type(5)?{
background-color:#b435bf;
-webkit-transform:rotateY(-90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/
.main?p:nth-of-type(6)?{
background-color:blue;
-webkit-transform:rotateY(180deg)?translateZ(100px);
}
/*鼠標移入時繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/
.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???
/style
/head
body
div?class="main-bac"
div?class="main"
p言成科技/p
p3D立方體/p
pHTML5學堂/p
p3D立方體/p
p碼匠/p
pJavaScript/p
/div??????????????
/div
/body
/html
代碼解析
當鼠標移入的時候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時，圍繞Y軸旋轉(zhuǎn)45度。
當鼠標移出立方體時，立方體恢復到初始狀態(tài)。在最開始狀態(tài)時，并沒有采用無限遠的視角，設(shè)置一定的視角，讓剛開始時直視立方體時，不會覺得是一個平面。
3D效果制作-目標效果圖
以上資料來源：《HTML5布局之路》
下面的鏈接列舉了一些常用的用于Html5的常用3d游戲引擎.
個人比較推薦three.js, cocos2d.js.
cocos2d有一些已經(jīng)成型的效果和游戲展示.
three.js是更加強大的, 除了提供了基礎(chǔ)的一些畫圖的方法以外, 3d max還支持導出模型給它使用.
重慶分公司
重慶分公司
