我寫了個正方體的模板，你可以按照你想要的把每個面旋轉不同角度就行了
成都創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鐵西企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設，鐵西網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
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
可以肯定是可以的。
但是，開發(fā)3d游戲一般都是使用3d引擎的，因為3d游戲不光是要畫圖、還有邏輯、ai、聲音等亂七八糟的非常復雜。當然，你可以用delphi學一學3d開發(fā)的技術，因為不管什么引擎，使用的時候你都需要掌握這些基本的技能。
1、首先打開html文件編輯器，這里使用vscode新建一個html文檔，文檔中寫入基本的html結構，然后插入img標簽并插入一張圖片，給img一個class屬性：
2、然后在上方的head標簽中的style標簽設置樣式，這里設置圖片的寬度和高度并設置相對定位，然后設置圖片的鼠標懸浮樣式，其中設置動畫的形式為3d以及設置圖片3d旋轉偏移的角度，添加一個動畫，設置好延時即可：
3、最后打開瀏覽器，就會看到一個圖片：
4、當鼠標移動上去，圖片就會自動3d旋轉了：
3D 是完全基于 WebGL 技術實現(xiàn)的渲染引擎，但開發(fā)者幾乎不需要了解 3D 圖形數(shù)學或 Shader 渲染的底層技術，只需要掌握基本的 3D 坐標系和相機 Camera 的概念，剩下需要掌握的也就是基本JavaScript 的面對對象編程知識，即可快速開發(fā)各種豐富的 3D 場景應用。最主要的就是運用H5
CSS3除了為開發(fā)者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態(tài)，能夠實現(xiàn)真正的三維特效。
三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過語法告知瀏覽器“請采用三維方式進行變形處理”，另一種方式是直接使用CSS3三維變形的語法。
觸發(fā)方法1：告知瀏覽器變形方式
-webkit-transform-style:preserve-3d;
Tips：IE不支持三維變形，在移動端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書寫-webkit-的前綴內(nèi)核。
Tips：不要為body元素設置-webkit- transform-style: preserve 3d,否則會對position:fixed定位的元素造成布局影響。在開發(fā)當中，如果當前元素屬于body的子級元素，又希望應用三維變形，則在body和當前元素之間多嵌套一層結構，并為這層元素應用三維變形即可。
觸發(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相關知識詳解—視角以及變形方向》
3D效果制作
需求
制作一個立方體，并進行旋轉
代碼實例
!DOCTYPE?HTML
html
head
meta?charset="utf-8"?/
title言成科技/title
link?rel="stylesheet"?type="text/css"?href=""?/
style
.main-bac?{?-webkit-perspective:1500;?}?/*設定透視距離*/
.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軸旋轉90度形成上面的面*/
.main?p:nth-of-type(2)?{
background-color:orange;?
-webkit-transform:rotateX(90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞x軸旋轉-90度形成下邊的面*/
.main?p:nth-of-type(3)?{
background-color:yellow;
-webkit-transform:rotateX(-90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉90度形成右側的面*/
.main?p:nth-of-type(4)?{
background-color:green;
-webkit-transform:rotateY(90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉-90度形成左側的面*/
.main?p:nth-of-type(5)?{
background-color:#b435bf;
-webkit-transform:rotateY(-90deg)?translateZ(100px);
}
/*將第一個元素Z軸向前移動100px，繞y軸旋轉180度形成后面（背面）*/
.main?p:nth-of-type(6)?{
background-color:blue;
-webkit-transform:rotateY(180deg)?translateZ(100px);
}
/*鼠標移入時繞Y軸旋轉180度，繞Z軸旋轉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ā)生旋轉（非突變），圍繞X軸旋轉45度的同時，圍繞Y軸旋轉45度。
當鼠標移出立方體時，立方體恢復到初始狀態(tài)。在最開始狀態(tài)時，并沒有采用無限遠的視角，設置一定的視角，讓剛開始時直視立方體時，不會覺得是一個平面。
3D效果制作-目標效果圖
以上資料來源：《HTML5布局之路》
下面的鏈接列舉了一些常用的用于Html5的常用3d游戲引擎.
個人比較推薦three.js, cocos2d.js.
cocos2d有一些已經(jīng)成型的效果和游戲展示.
three.js是更加強大的, 除了提供了基礎的一些畫圖的方法以外, 3d max還支持導出模型給它使用.
重慶分公司
重慶分公司
