整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一、項目背景】
隨著HTML5 CSS3的出現和發展，使得我們的網頁可以實現更加復雜的效果，也使得我們的瀏覽體驗更加豐富，所以今天我們將制作一個正方體的3D效果。
【二、項目分析】
想要利用CSS3實現3D立方體，就要清楚立方體是由六個面組成，分上下左右和前后，考慮這些可以幫助我們更好的融入CSS3的代碼。
因此我設置了6個div，作為立方體的6個面。因為定位的原因，一開始所有的盒子都是面對著屏幕這面的，因此要賦予每個面不一樣的值，即不一樣的位置它才能展現出來。
【三、需要的工具】
Adobe Dreamweaver
【四、項目目標】
實現3的l立方體旋轉，鼠標移上去實現縮放效果。
【五、項目實現】
1、打開Adobe Dreamweaver，新建html文檔。把標題改為“3d立方體”。
<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() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
通過 rotateZ() 方法，元素圍繞其 Z 軸以給定的度數進行旋轉。
下表是部分屬性所代表的含義：
4、運行一下看下效果；點擊F12運行。
5、呈現的效果如下圖所示。
可以看到效果基本上可以 ，可是鼠標移上去沒有效果。
.box:hover{
transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
} # scale是縮放倍數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、整個效果寫出來，還是比較簡單的，只要明白各個命令的意思，剩下的就是組織一下邏輯而已。
5、如果需要本文源碼，請在公眾號后臺回復“立方體”四個字獲取。
看完本文有收獲？請轉發分享給更多的人
IT共享之家
入群請在微信后臺回復【入群】
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/
前言
在大數據盛行的現在，大屏數據可視化也已經成為了一個熱門的話題。大屏可視化可以運用在眾多領域中，比如工業互聯網、醫療、交通、工業控制等等。將各項重要指標數據以圖表、各種圖形等形式表現在一個頁面上，各種數據一目了然。隨著瀏覽器不斷發展完善，使用 Web 做大屏展示也已經不是新鮮的事了。市面上已有不少的大屏解決方案，大部分是以放各種圖表的形式呈現，基本是 2D 的呈現。有些是根據投放屏幕的比例設計出來的，并不能自適應于其它的屏幕比例。最近學習了 Hightopo 的 HT for Web 產品，特有的矢量，在各種比例下不失真，加上布局機制，解決了不同屏幕比例下的展示問題，加上 3D 的呈現部分，可以做出別具一格的大屏系統。在這里與大家分享學習，先來張整體效果圖：
本文主要介紹內容如下，文章中以 HT 作為 HT for Web 的簡稱：
一、頁面搭建
在這個系統中，我們需要創建 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時代的到來，一定在互聯網上會越來越常見。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
