css 3d立方體

weapon 發布于2019-08-29 13:14 / 2257人閱讀

了解一些css3動畫知識，3d效果實現。
原文連接

狀態1 首先創建一個立方體容器元素

.box {
     position: relative;
     width: 100px;
     height: 100px;
     transform-style: preserve-3d;
}

transform-style 屬性的定義為規定如何在3d空間中呈現被嵌套元素
flat為默認值平面顯示，preserve-3d為子元素保留3d位置
也就是該屬性在需要展示3d效果元素的父元素上設置

立方體的六個面

創建6個div元素設置相同絕對定位顯示，為了效果明顯每個面設置了0.5的透明度。

.box div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: .5;
     transform-origin: center;
}

transform-origin 屬性設置被轉換元素的位置，可以理解為轉換的中心點在哪個位置

狀態2

為了顯示出立方體的上下面和側面需要對4個面進行繞X、Y軸的直角轉換

.box div:nth-of-type(1),
.box div:nth-of-type(2){
     transform: rotatex(90deg);
}

.box div:nth-of-type(3),
.box div:nth-of-type(4){
     transform: rotatey(90deg);
}

可以給容器增加一定角度突出效果

.box{
     transform: rotatex(45deg) rotatey(45deg);
}

狀態3

接下來就是撐開6個面，構建成為立方體啦
在每個面轉換的基礎上增加/減少寬高二分之一的Z軸位置轉換

.box div:nth-of-type(1){
     transform: rotatex(90deg) translatez(50px);
}

.box div:nth-of-type(2){
     transform: rotatex(90deg) translatez(-50px);
}

.box div:nth-of-type(3){
     transform: rotatey(90deg) translatez(50px); 
}

.box div:nth-of-type(4){
     transform: rotatey(90deg) translatez(-50px); 
}

.box div:nth-of-type(5){
     transform: translatez(50px); 
}

.box div:nth-of-type(6){
     transform: translatez(-50px); 
}

這樣一個3d立方體就已經構建完成啦 ^_^

云服務器 GPU云服務器 css3d js鼠標拖動3D立方體旋轉 java3d正方體創3d 3d打印云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/112462.html

H5打造3d場景不完全攻略（二）: Amazing CSS3D

摘要：實現方法可參考這篇文章純打造的模型渲染器實現全景。天空盒子相信很多打造過或有了解過全景的同行們都知道這個概念。首先將創建好的六個面切割出來，以命名標記位置。柱形柱形全景也不算復雜。前言對的，本文就是著重介紹如何使用CSS3中的3D變換打造出H5中的3D效果。靈感來源于造物節團隊的3d引擎，因為使用方法比較復雜，也沒有開源的API文檔，于是想自己另外造個輪子，便開始了相關內容的學習和...

fancyLuo 2019-08-29 11:29 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

leone 2019-08-29 15:10 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

LittleLiByte 2019-08-02 10:18 評論0 收藏0
CSS 3D Panorama（全景） - 淘寶造物節技術剖析

摘要：淘寶造物節的活動頁就是全景的一個很贊的頁面，它將全景圖分割成等份，相鄰的元素構成的夾角，相鄰兩側面相對于棱柱中心所構成的夾角。本文轉自凹凸實驗室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...

LiuRhoRamen 2019-08-29 11:16 評論0 收藏0