HTML5大顯神通：8個3D視覺效果“讓你好看”

在的網頁中應用了越來越多的3D應用，特別是基于HTML5 Canvas的動畫特效，讓用戶有一種非常震撼的視覺體驗。本文收集了8個非常炫酷的3D視覺效果的HTML5動畫，都有源代碼分享，你可以學習你感興趣的HTML5動畫，一起來看看。

1、CSS3飄帶狀3D菜單

菜單帶小圖標這次我們要來分享一款很特別的CSS3菜單，菜單的外觀是飄帶狀的，并且每一個菜單項有一個精美的小圖標，鼠標滑過菜單項時，菜單項就會向上凸起，像是飄帶飄動一樣，形成非常酷的3D視覺效果。這款CSS3飄帶狀3D菜單非常適合作一些活動頁面的菜單導航。

2、HTML5/CSS3 3D紙片折疊動畫

今天我們再來分享一款非常華麗的HTML5/CSS3 3D動畫特效，盡管它目前很少能在項目中應用，但從源碼中我們可以學到很多HTML5 3D動畫的制作知識。這是一款紙片折疊動畫特效，利用HTML5和CSS3的相關特性，我們可以將一張張紙片折疊起來，形成很酷的3D動畫效果。

3、HTML5 webkit 3D立方體圖片旋轉滑塊應用

今天再來分享一款HTML5 3D立方體動畫，這個只是一個3D效果模型，你可以用圖片替換演示中的立方體4個面，這樣就可以將這款HTML5立方體旋轉動畫改造成HTML5 3D焦點圖了，由于是基于webkit的，所以有瀏覽器限制，Google Chrome最佳。

4、HTML5顏色漸變3D文字特效

之前我們已經分享過不少HTML5文字特效，效果都還不錯，尤其是這款HTML5擺動的文字特效類似柳枝擺動，更是有非常酷的文字動畫效果。今天我們要分享一款HTML5 3D文字特效，文字的顏色是漸變的，同時有文字陰影，更加凸顯了3D立體的效果。

5、HTML5 3D圖片陰影翻轉動畫

今天我們要分享一款很酷的HTML5 3D動畫特效，這款3D特效可以為你的圖片增加陰影的效果，而且可以讓圖片在鼠標滑過的時候出現3D翻轉的動畫效果。這和之前分享的HTML5 3D動畫HTML5 3D正方體旋轉動畫有著類似的效果，大家也可以看看。

6、純CSS3 3D按鈕按鈕酷似牛奶般剔透

CSS3按鈕一般都可以設計的非常漂亮，利用投影、漸變等CSS3屬性特效可以把按鈕渲染的十分動感。今天分享的這款CSS3按鈕外觀非常特別，它看上去酷似晶瑩剔透的牛奶，而且在點擊按鈕時出現3D效果的動畫，按鈕按下時，按鈕會輕輕的彈動一下，非常逼真。

7、CSS3 3D發光切換按鈕

剛剛我們發布過一款CSS3開關切換滑動按鈕，應該說出了有點3D立體的效果外，其他都很普通。現在我們要來分享一款更酷的CSS3開關切換按鈕，它不僅具有3D的效果，而且可以發光，當開關處于打開狀態時，旁邊的小燈就會亮起來，然后燈光投射到開關上，效果挺逼真的。

8、CSS3 3D彈性按鈕

今天要分享的這款CSS3按鈕和這款按鈕差不錯，也同樣擁有3D的效果，按鈕在按下時帶有彈性質感。

微信搜索“IT之家”關注搶6s大禮！下載IT之家客戶端（戳這里）也可參與評論抽樓層大獎！

京四度科技有限公司成立于2010年12月，是一家在互聯網高端軟件領域專業從事網頁3D引擎的研發，以及3D虛擬現實網頁作品設計的高新技術企業。

國內最大的3D網站研發企業，國內技術實力最強的WebGL團隊；國內最早從事WebGL3D網站研發的企業。網頁虛擬現實技術研發、網頁三維引擎研發、布料物理動力學引擎研發、物理力學引擎研發、空氣動力學引擎研發、3D模型JSON編碼技術研發等。

我們是國內最專業的3D網站開發企業，一種全新的網站將帶給您無與倫比的非凡體驗，它將帶您走進一個看似虛擬但卻真實的夢幻世界!

從2012年起業務已延伸到多媒體展館展廳設計、3D動畫、工業3D交互展示、3D虛擬交互展示、互動多媒體應用、3D數字沙盤系統、3D網上展館設計、產品3D交互漫游系統、VR虛擬現實、AR增強現實應用等方面，為政府、企業、房地產提供一站式數字交互服務。

我們是國內率先利用 HTML5+WebGL 技術為國內企事業單位提供增值互聯網+服務的服務商，也是國內最主要的WebGL開發服務商，我們開創了國內WebVR應用的先河，我們的作品將顛覆人們對傳統網站的認識，一種全新的網站將帶給您無與倫比的非凡體驗，它將帶您走進一個看似虛擬但卻真實的立體世界。

行業技術3D展示應用：

1、3D虛擬商城

虛擬3D商城是互聯網技術飛速發展的產物，它超越了現有網絡商務平臺，實現了前所未有的電子商務“人機一體”和身臨其境的三維立體效果。我們為您提供一個高度互動的3D虛擬現實環境，一種足不出戶便如同親臨購物中心的全新體驗。

- 虛擬現實漫游

- 集成O2O電商管理

- 集成在線支付

- 交互互動操作

- 沉浸式購物體驗

-VR購物系統體驗

2、可視化DIY

獨特的在線3D可視化定制模式 — 讓網友擁有與眾不同的購物體驗，我們認為：每個人都是生活的設計師。模塊化的組合可以形成上千種的樣式，客戶可以根據自己的風格定制屬于自己的特定商品。

-物體拖移組合

-交換部件材質顏色

-交換部件大小、形狀、結構

-模型拆解組裝拼接

-交換部件位置、旋轉方位

3、產品3D展示

產品3D模型展示以其便捷性、互動體驗、直觀性三大特點向人們充分展示了一個奇妙的精彩視界：消費者可通過互聯網，用電腦操作產品，或360°旋轉及查看產品內部結構分解，精彩紛呈的視覺效果，讓消費者自由暢享互動的樂趣。

- 集成CMS內容管理

- 三維產品在線展示

- 用戶自主上傳產品模型

- 用戶自主管理模型庫

- 鼠標交互互動操作

4、三維虛擬仿真

我們為景區、樓盤、院館、游戲等在互聯網上構建一個三維場景，網友在其中穿行，足不出戶就能感受到華麗的篇章。場景和控制者之間能產生交互，加之高質量的畫面實時渲染使人產生身臨其境的感覺，它將帶您走進一個看似虛擬但卻真實的奇異世界。

- 景區旅游在線仿真展示

- 房地產樓盤在線仿真展示

- 汽車模擬駕駛仿真

- 3D立體眼鏡仿真（紅藍眼鏡、左右眼鏡、偏振眼鏡）

- 工業設備自動化在線仿真展示

5、創意設計

我們擅長基于互聯網瀏覽器的交互式動畫、特效表現、視覺設計、程序設計。此項技術在3D網站的應用，使3D網站在表現上更加絢麗多彩，增強前所未有的視覺感染力，它不同與影視特效，因為完全由程序實現，所有我們可以用鼠標或鍵盤控制動畫場景中畫面的視角、節奏、動畫。

- 網頁3D游戲

- 影視動畫視頻特效

- 虛擬網頁場景構建

- 3D文字創意

- 粒子動畫創意

- 物品幾何創意

- 光影、云霧、景深等視覺創意

6、數字展館

3D數字展館是指利用數字化手段，實現藏品保存，陳列展示，科學研究和社會教育等功能，構筑虛擬世界的展覽館；對于普遍意義上的數字展覽館來說，是指利用數字技術，對文物（包括可移動文物和不可移動文物）信息進行全方位和多形式采集，標準化存儲和加工，并通過網絡連接和一系列相關規定，協議，實現文物信息的資源共享，有效利用和科學管理。

- 3D網絡數字展覽館

-3D網上博物館

-3D網上美術館

-3D園區虛擬漫游

一、項目背景】

隨著HTML5 CSS3的出現和發展，使得我們的網頁可以實現更加復雜的效果，也使得我們的瀏覽體驗更加豐富，所以今天我們將制作一個正方體的3D效果。

【二、項目分析】

想要利用CSS3實現3D立方體，就要清楚立方體是由六個面組成，分上下左右和前后，考慮這些可以幫助我們更好的融入CSS3的代碼。

因此我設置了6個div，作為立方體的6個面。因為定位的原因，一開始所有的盒子都是面對著屏幕這面的，因此要賦予每個面不一樣的值，即不一樣的位置它才能展現出來。

【三、需要的工具】

Adobe Dreamweaver

【四、項目目標】

實現3的l立方體旋轉，鼠標移上去實現縮放效果。

【五、項目實現】

1、打開Adobe Dreamweaver，新建html文檔。把標題改為“3d立方體”。

2、在body標簽，創建一個div盒子，給它class屬性，在外層div里面在創建6個div表示立方體的六個面，同樣給它們 class屬性。

<body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>

3、創建CSS樣式

<style type="text/css">
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transition: all 2s;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
  transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
}
.box .box-2:nth-child(1) {
  /*小立方體第一面*/
  background: rgba(225,0,0,0.5);
  transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
    /*小立方體第二面*/
  background: rgba(255,255,0,0.5);
  transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
    /*小立方體第三面*/
  background: rgba(225,0,255,0.5);
  transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
     /*小立方體第四面*/
  background: rgba(0,255,0,0.5);
  transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
     /*小立方體第五面*/
  background: rgba(225,0,0,0.5);
  transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
    /*小立方體第六面*/
  background: rgba(0,0,255,0.5);
  transform: rotateY(180deg) translateZ(50px);
}
</style>
  </head>
  <body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>
</html>

方法說明：

rotateX() 方法

通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。

rotateY() 旋轉

通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。

rotateZ() 旋轉

通過 rotateZ() 方法，元素圍繞其 Z 軸以給定的度數進行旋轉。

下表是部分屬性所代表的含義：

4、運行一下看下效果；點擊F12運行。

5、呈現的效果如下圖所示。

可以看到效果基本上可以，可是鼠標移上去沒有效果。

6、添加鼠標移上去縮放的效果

.box:hover{
    transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);

  } # scale是縮放倍數

7、外層再添加一個3d立方體形成疊加效果

body代碼：

<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>

CSS樣式代碼

<style type="text/css">
.box .box-1{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 2em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box .box-1:nth-child(1){
    /*大立方體第一面*/
    background: rgba(225,0,0,0.5);
    transform:rotateX(90deg) translateZ(100px);

  }.box .box-1:nth-child(2){
         /*大立方體第二面*/
    background: rgba(255,255,0,0.5);
    transform:rotateX(-90deg) translateZ(100px);

  }.box .box-1:nth-child(3){
        /*大立方體第三面*/
    background: rgba(225,0,255,0.5);
    transform:rotateY(-90deg) translateZ(100px);
  }.box .box-1:nth-child(4){
         /*大立方體第四面*/
    background: rgba(0,255,0,0.5);
    transform:rotateY(90deg) translateZ(100px);

  }.box .box-1:nth-child(5){
        /*大立方體第五面*/
    background: rgba(225,0,0,0.5);
      transform:translateZ(100px);
  }.box .box-1:nth-child(6){
        /*大立方體第六面*/
    background: rgba(0,0,255,0.5);
    transform:rotateY(180deg) translateZ(100px);
  }
</style>

【六、效果展示】

1、點擊運行，效果如下圖所示。

2、鼠標移到立方體上，縮放效果展示，如下圖所示。

【七、總結】

1、整個效果寫出來，還是比較簡單的，只要明白各個命令的意思，剩下的就是組織一下邏輯而已。

2、歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

3、CSS樣式的效果不止這些，還有更加炫酷的效果，值得大家去學習。

4、實現的方法3d立方體的方法有很多，但這是最簡單的一種。

5、如果需要本文源碼，請在公眾號后臺回復“立方體”四個字獲取。

看完本文有收獲？請轉發分享給更多的人

IT共享之家

入群請在微信后臺回復【入群】

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

在線咨詢

上一篇：精選13個HTML5學習必備網站
下一篇：這 12 個實用的 HTML標簽（組件）建議盡早用上

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商