整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一篇文章教會你利用html5和css3實現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/

          于 HTML5 的工業組態高爐煉鐵 3D 大屏可視化

          前言

          在大數據盛行的現在,大屏數據可視化也已經成為了一個熱門的話題。大屏可視化可以運用在眾多領域中,比如工業互聯網、醫療、交通、工業控制等等。將各項重要指標數據以圖表、各種圖形等形式表現在一個頁面上,各種數據一目了然。隨著瀏覽器不斷發展完善,使用 Web 做大屏展示也已經不是新鮮的事了。市面上已有不少的大屏解決方案,大部分是以放各種圖表的形式呈現,基本是 2D 的呈現。有些是根據投放屏幕的比例設計出來的,并不能自適應于其它的屏幕比例。最近學習了 Hightopo 的 HT for Web 產品,特有的矢量,在各種比例下不失真,加上布局機制,解決了不同屏幕比例下的展示問題,加上 3D 的呈現部分,可以做出別具一格的大屏系統。在這里與大家分享學習,先來張整體效果圖:

          本文主要介紹內容如下,文章中以 HT 作為 HT for Web 的簡稱:

          1. 頁面搭建
          2. 數據對接
          3. 動畫效果實現
          4. 其他細節優化

          一、頁面搭建

          在這個系統中,我們需要創建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現 2D 和 3D 的內容。設計師給到的 display.json 是 2D 圖紙的內容,主要是使用矢量繪制呈現,有一些圖表是用了 Echarts,HT 也有機制可以讓我們使用它們。scene.json 是 3D 場景的內容,大部分模型都是通過 3dMax 建模生成的,該建模工具可以導出 obj 與 mtl 文件,在 HT 中可以通過解析 obj 與 mtl 文件來生成 3d 場景中的所有復雜模型,簡單的模型也可以通過 HT 來建模。關鍵代碼如下:

          二、數據對接

          頁面加載出來后,就可以與后臺通訊,請求相關數據對接到對應的元素上了。HT 一大強項是作為 Web 組態,所以有很友好的數據綁定方式,我們可以輕松將數據展示到各個節點上。我們這個案例采用隨機數模擬的方式模擬展示數據,在 json 中對相應的節點設置唯一標識 tag,在反序列化完成后,通過 g2d.dm().getDataByTag(tag) 來獲得相應節點,再根據這個節點的數據綁定來將數據展示到改節點上。

          以上表格是一個用 ht 定義的矢量節點,矢量由一個個組件組成,組件不僅可以預定義的矩形,文本等內容,也可以引用其它定義好的矢量,甚至可以自定義繪制邏輯,這個表格就由此而來。矢量不僅可以用在 2D 圖紙里,還可以用在 3D 貼圖中,在我們 3D 場景中,以下截圖的幾個面板也是使用矢量實現,

          HT 中數據都由 DataModel 驅動,所以 3D 對接數據也是一樣的,這里就不再贅述。

          三、動畫效果實現

          • 鐵水罐車動畫

          這個案例中最明顯的動畫應該就是鐵水罐車的動畫了,我們先來聊聊它的實現。基本流程是這樣的

          如上,我們依然是在反序列化完成后,通過 car = g3d.dm().getDataByTag('car'); 得到鐵水罐車的節點對象。

          通過 car.s('3d.visible', true | false); 就可以控制它的顯隱。

          通過不斷修改節點的 3D 坐標就可以實現位移效果 car.setPosition3d(x, y, z);

          至于鐵水罐車上的面板,也是個矢量,將它吸附于鐵水罐車節點,它就會跟隨車移動,不需要單獨控制它的坐標來實現動畫。

          • 管道中氣體流動動畫

          這部分動畫效果,只要不斷修改貼圖的 uv 值就可以實現,以下是示例代碼,node 還是由 getDataByTag 得來

          總結

          通過 2D 3D 結合的方式的大屏展示,可以非常直觀的看到數據呈現,比如在履帶出的上料數據,通過它的位置,不需要太多文字描述就知道這里是要展示什么內容。HT 非常輕量,可以結合 2D 3D 呈現數據,矢量在各種屏幕下不失真,還可以適應各種屏幕大小進行展示,用來做大屏可視化再合適不過了。除了在大屏上,電腦上可以展示良好,移動端同樣支持,最后放上一張移動端的效果圖。

          作者:勤勞的搬運工

          鏈接:https://juejin.im/post/5d6c57b1f265da03cd0a97ef

          著時代的發展,智能手機的拍照功能基本淘汰了普通相機,但是現在又出現了一個新科技-VR(虛擬現實),于是產生了VR全景相機等,可以拍攝VR全景圖片、VR全景視頻等。如果把VR全景圖片在網站上展示,是不是很酷,其實這種技術已經應用在很多網站,如百度地圖有全景預覽,可以詳細查看指定地點清晰圖片,非常方便查看實地情況。

          VR全景展示這么有用,那么今天我們就探討如何在網站上顯示VR全景圖片。

          全景圖片分類如下:

          1、球面全景圖,利用一張全景圖圍成一個球,自身位置位于球體內。由于圖片是矩形,所以最上和最下的縫合處很明顯就能夠看得出來。

          2、立方體全景圖,一個立方體,有六個面組成,所以就需要六張圖片啦。自身的位置位于立方體中間。

          2、柱狀全景圖,是由球面全景圖和立方體全景圖結合而成

          如果按照普通網頁IMG標簽顯示VR全景圖片,可以顯示,但是沒有VR效果,所以傳統方式是絕對不行的。

          展示VR全景圖片目前僅限支持WebGL和canvas的瀏覽器,主要還是HTML5的作用,HTML5確實大大增加了網頁瀏覽器的能力。

          這里可以使用3d全景效果JS插件:ThetaViewer。

          代碼非常簡單,只要引入對于的JS,然后幾行JS代碼就可以實現。

          VR全景圖片可以展示了,很多人會問VR全景視頻可以在網站上展示嗎?答案是肯定的。

          目前已經有很多VR全景視頻制作的公司,也有一些開源的全景視頻制作工具,如HTML5 Pano和play2VR等。

          VR全景圖片其出色的展示效果,相信5G時代的到來,一定在互聯網上會越來越常見。


          主站蜘蛛池模板: 91在线看片一区国产| 日韩一区二区三区射精| 色婷婷亚洲一区二区三区| 国产av福利一区二区三巨| 国产SUV精品一区二区四 | 亚洲高清日韩精品第一区| 亚洲国产高清在线一区二区三区| 亚洲av色香蕉一区二区三区蜜桃| 无码视频一区二区三区在线观看 | 日本福利一区二区| 国产精品亚洲午夜一区二区三区| 中文字幕精品亚洲无线码一区应用| 日本福利一区二区| 国产91精品一区| 国产一区二区三区美女| 精品无码国产AV一区二区三区| 亚洲AV无码一区二区三区牛牛| 亚洲一区二区三区免费视频| 秋霞无码一区二区| 97久久精品无码一区二区天美| 精品无码日韩一区二区三区不卡 | 高清精品一区二区三区一区| 99精品一区二区免费视频| 日韩精品一区二区亚洲AV观看| 无码精品视频一区二区三区| 人妻天天爽夜夜爽一区二区| 亚洲一区二区三区在线| 五十路熟女人妻一区二区| 欧美av色香蕉一区二区蜜桃小说 | 中文字幕一区在线| 国产av一区二区三区日韩| 无码人妻精品一区二区三区久久 | 人体内射精一区二区三区| 精品欧洲av无码一区二区| 成人无码精品一区二区三区| 国产a久久精品一区二区三区| 一区二区三区四区在线视频| 中文字幕在线观看一区二区| 日韩精品一区二区亚洲AV观看| 国产乱码一区二区三区| 国产成人一区二区动漫精品|