玩轉(zhuǎn)CSS 3D -正八面體與正十二面體

Neilyo 發(fā)布于2019-08-29 18:37 / 2687人閱讀

摘要：正八面體與正十二面體，這兩個(gè)正多面體雖然組合的面比較多，不過因?yàn)榫邆淞藢?duì)稱性，所以只需要制作出一半的結(jié)構(gòu)，另外一半再用反轉(zhuǎn)的方式接在一起即可。同樣的，旋轉(zhuǎn)讓整個(gè)正八面體旋轉(zhuǎn)，看起來更有立體感。

正八面體與正十二面體，這兩個(gè)正多面體雖然組合的面比較多，不過因?yàn)榫邆淞藢?duì)稱性，所以只需要制作出一半的結(jié)構(gòu)，另外一半再用反轉(zhuǎn)的方式接在一起即可。

正八面體

正八面體可以想像成“兩個(gè)金字塔”疊合在一起，為了方便我們后續(xù)作整個(gè)金字塔旋轉(zhuǎn)的動(dòng)作，我們要用另外一個(gè)容器來把金字塔包裝起來，可以想像成把金字塔的四個(gè)面變成一個(gè)群組，就可以針對(duì)這個(gè)群組做變形或移動(dòng)，HTML的結(jié)構(gòu)如下，space里面有box1和box2，box1是上半部的金字塔，box2是下半部的金字塔：

再來同樣先針對(duì)camera和space做設(shè)定。

.camera{
    width:200px;
    height:200px;
    -webkit-perspective-origin:50% 50%;
    -webkit-perspective:500px;
}
.space{
    position:relative;
    width:100%;
    height:100%;
    border:1px dashed #000;
    -webkit-transform-style:preserve-3d;
}

然后因?yàn)槲覀冇玫降拿鎓ace都是三角形，同樣要用border來達(dá)成，記得position要設(shè)定為absolute，并且由于box1，box2本身內(nèi)部也是立體空間，所以同樣要加上transform-style: preserve-3d的屬性。

.space div{
    position:absolute;
}
.box1, .box2{
    transform-style:preserve-3d;
}
.box1 div,.box2 div{
  width:0;
  height:0;
  border-width:0 50px 87px;
  border-style:solid;
  opacity:.4;
}

再來制作box1的金字塔造型，由于正八面體每個(gè)面夾角為109.28度，又因?yàn)榉譃樯蟽砂?，從中間差開，一半為54.64度，因此我們要旋轉(zhuǎn)的角度是：90 - 54.64 = 35.36，所以待會(huì)我們要旋轉(zhuǎn)的角度就以此為主，先看到face1，順著x軸往內(nèi)轉(zhuǎn)35.36度。

.face1{
    border-color:transparent transparent #f00;
    transform-origin:center bottom;
    transform:translateX(50px) translateY(50px) rotateX(35.36deg);
}

face2則要先以右邊為圓心，繞Y軸旋轉(zhuǎn)90度，之后再繞X軸旋轉(zhuǎn)35.36度。

.face2{
    border-color:transparent transparent #00f;
    transform-origin:right bottom;
    transform:translateX(50px) translateY(50px) rotateY(-90deg) rotateX(-35.36deg);
}

face3在face1的對(duì)面，所以先在Z軸移動(dòng)100px，接著再繞X軸旋轉(zhuǎn)35.36度。

.face3{
    border-color:transparent transparent #0f0;
    transform-origin:left bottom;
    transform:translateX(50px) translateY(50px)  translateZ(-100px) rotateX(-35.36deg);
}

face4跟face2雷同，只是face4用左側(cè)為圓心。

.face4{
    border-color:transparent transparent #f90;
    transform-origin:left bottom;
    transform:translateX(50px) translateY(50px) rotateY(90deg) rotateX(-35.36deg);
}

基本上到這邊，已經(jīng)完成了上半部box1的金字塔造型，這時(shí)后的box1與box2是重疊的，我們只要將box2反轉(zhuǎn)并改變位置，就可以變成一個(gè)正八面體的造型，但這里會(huì)遇到一個(gè)很有意思的問題，box2變形的中心點(diǎn)在哪里？這時(shí)候就必須用到好幾次的三角函數(shù)計(jì)算，因?yàn)槭且粋€(gè)金子塔造型旋轉(zhuǎn)的中心點(diǎn)，所以就要把Z軸考察進(jìn)去，首先看到X軸設(shè)定為center是沒問題的，Z軸因?yàn)榻鹱铀牡撞渴?00 x 100的正方形，所以中心點(diǎn)在50px的位置也很正常，但Y軸就比較麻煩，首先我們看到正三角形的一個(gè)邊長為100px，中線的長度就是sin（60）x 100 = 86.6左右，再來用sin（54.64）x 86.6就得到金子塔的高度70.6，四舍五入一下就得到了71，因此當(dāng)我們將變形中心設(shè)定在這邊，旋轉(zhuǎn)的時(shí)候就會(huì)繞著金子塔頂旋轉(zhuǎn)，旋轉(zhuǎn)180度之后，就要利用translateY來歸位，要移動(dòng)的距離約為100 + 71/2 = 135左右，但因?yàn)閺囊婚_始我們就都是用四舍五入的方式進(jìn)行，難免最后用整數(shù)表現(xiàn)會(huì)有誤差（兩個(gè)金字塔接不起來），這時(shí)就必須要用手動(dòng)微調(diào)，這里設(shè)定為-132px即可。

.box2{
      transform-origin: center 71px -50px;
      transform: rotateX(180deg) translateY(-132px);
}

同樣的，旋轉(zhuǎn)space讓整個(gè)正八面體旋轉(zhuǎn)，看起來更有立體感。

.space{
    position:relative;
    width:100%;
    height:100%;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin:center center -50px;
    -webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
    0%{
        -webkit-transform:rotateY(0);
    }
    100%{
        -webkit-transform:rotateY(-359.9deg);
    }
}

正十二面體

會(huì)作正八面體之后，正十二面體差不多也是同樣的原理，只是正十二面體更加復(fù)雜，因?yàn)樗怯墒€(gè)正五邊形組成，不過這里要從正五邊形的五個(gè)邊去長出五個(gè)面，每個(gè)面的夾角為116.56度，180 - 116.56 = 63.44，待會(huì)用到的角度大概不會(huì)脫離這兩個(gè)數(shù)值，當(dāng)然因?yàn)橛泻芏嘈?shù)點(diǎn)，所以屆時(shí)還是必須手動(dòng)微調(diào)（因?yàn)橄袼刈钚挝皇?）。

HTML的結(jié)構(gòu)如下，也是分成兩塊，內(nèi)容各有六個(gè)面。

先設(shè)定一開始的CSS。

.camera{
    width:200px;
    height:200px;
    perspective-origin:50% 0%;
    -moz-perspective-origin:50% 0%;
    -webkit-perspective-origin:50% 0%;
    perspective:500px;
    -moz-perspective:500px;
    -webkit-perspective:500px;
}
.space{
    position:relative;
    width:100%;
    height:100%;
    border:1px dashed #000;
    transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}
.space div{
    position:absolute;
}
.box1, .box2{
    transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}

再來是慢慢的畫每個(gè)面，首先是畫出所有的正五邊形。

.box1 div,.box2 div{
  width:162px;
  height:154px;
  opacity:.9;
}
.box1 div:before,.box2 div:before{
  position:absolute;
  content:"";
  top:0;
  width:0;
  height:0;
  border-width:0 81px 59px;
  border-style:solid;
  border-color:transparent transparent #069;
}
.box1 div:after,.box2 div:after{
  position:absolute;
  content:"";
  top:59px;
  left:0;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;   
  border-color:#069 transparent transparent;
}

因?yàn)槭且烧暹呅蔚奈鍌€(gè)邊往外長五個(gè)面，所以face1就不做更動(dòng)，屆時(shí)再讓box做旋轉(zhuǎn)即可，而face2到face6這五個(gè)面，比較簡(jiǎn)單的做法就是直接先做Z軸旋轉(zhuǎn)的動(dòng)作，然后再進(jìn)行Y軸旋轉(zhuǎn)，再把各個(gè)面translate到對(duì)應(yīng)的位置，不過這里要非常注意，因?yàn)槲覀兿冗M(jìn)行了Z軸與Y軸的旋轉(zhuǎn)，所以各個(gè)面的坐標(biāo)系統(tǒng)已經(jīng)改變，可以參照下圖，就可以明白該如何translate，基本上就是在Y軸旋轉(zhuǎn)了-116.56度之后，各個(gè)面先朝向自己的Y軸移動(dòng)69px，然后為了讓各個(gè)邊貼齊，必須要再往Y軸移動(dòng)31px（cos（180-116.56）x 69），往Z軸移動(dòng)62px（sin（180-116.56）x 69）。

因此face2到face6就可以幾乎用完全一樣的方式寫出來（Z軸旋轉(zhuǎn)角度每個(gè)面差72度）

.face2{  
    transform-origin:81px 85px 0;
        transform:rotateZ(0) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face3{  
        transform-origin:81px 85px 0;
        transform:rotateZ(72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face3{  
        transform-origin:81px 85px 0;
        transform:rotateZ(72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face4{
        transform-origin:81px 85px 0;
        transform:rotateZ(144deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face5{  
      transform-origin:81px 85px 0;
      transform:rotateZ(-144deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}
.face6{  
        transform-origin:81px 85px 0;
      transform:rotateZ(-72deg) rotateX(-116.56deg) translateY(-69px) translateY(-31px) translateZ(62px);
}

為了讓每個(gè)面不同顏色，這里必須要改變偽元素的border色彩。

.box1 .face2:before{
  border-color:transparent transparent #f00;
}
.box1 .face2:after{
  border-color:#f00 transparent transparent;
}
.box1 .face3:before{
  border-color:transparent transparent #0f0;
}
.box1 .face3:after{
  border-color:#0f0 transparent transparent;
}
.box1 .face4:before{
  border-color:transparent transparent #f90;
}
.box1 .face4:after{
  border-color:#f90 transparent transparent;
}
.box1 .face5:before{
  border-color:transparent transparent #09f;
}
.box1 .face5:after{
  border-color:#09f transparent transparent;
}
.box1 .face6:before{
  border-color:transparent transparent #f0f;
}
.box1 .face6:after{
  border-color:#f0f transparent transparent;
}

最后就針對(duì)box1與box2做旋轉(zhuǎn)的動(dòng)作，這里比較需要注意的是translateZ，整個(gè)正五邊形的高度為276（sin（63.44）x 154 x 2），但位移的時(shí)候并非完全是這個(gè)高度，必須扣掉接合處短邊的高度，因此會(huì)變成223（276 - sin（36）x 100）

.box1{
    transform-origin:81px 85px 0;
    transform:rotateX(90deg) translateZ(-223px);
}
.box2{
    transform-origin:81px 85px 0;
    transform:rotateX(-90deg);
}

space加上動(dòng)畫效果，驗(yàn)證一下每個(gè)面是否都有接合的完美。

.space{
    position:relative;
    width:100%;
    height:100%;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin:81px 170px 0;
    -webkit-animation:s 4s linear infinite;
}
@-webkit-keyframes s{
    0%{
        -webkit-transform:rotateY(0) rotateX(0);
    }
    100%{
        -webkit-transform:rotateY(-359.9deg)  rotateX(359.9deg);
    }
}

GPU云服務(wù)器云服務(wù)器 css3d 玩轉(zhuǎn)linux 玩轉(zhuǎn)vps 玩轉(zhuǎn)ubuntu

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114459.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Neilyo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【歷史上的今天】10 月 12 日：C 語言之父逝世；西門子誕生；喬布斯推出 NeXT 電腦

閱讀 3486·2021-10-13 09:39
兒童故事書應(yīng)用軟件FarFaria暴露3M用戶數(shù)據(jù) 涉及290萬用戶信息

閱讀 1468·2021-10-08 10:05
騰訊開源百萬級(jí)服務(wù)發(fā)現(xiàn)和治理中心北極星

閱讀 2273·2021-09-26 09:56
網(wǎng)絡(luò)喚醒的配置好麻煩？沒關(guān)系這里有其他簡(jiǎn)單的遠(yuǎn)程開機(jī)方法！

閱讀 2288·2021-09-03 10:28
玩轉(zhuǎn)CSS 3D -正八面體與正十二面體

閱讀 2688·2019-08-29 18:37
淺析git

閱讀 2047·2019-08-29 17:07
vue入門筆記體系（六）vue組件

閱讀 609·2019-08-29 16:23
video.js 源碼分析（JavaScript）

閱讀 2200·2019-08-29 11:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

玩轉(zhuǎn)CSS 3D -正八面體與正十二面體

相關(guān)文章

**帶你玩轉(zhuǎn)css3的3D！**

**帶你玩轉(zhuǎn)css3的3D！**

玩轉(zhuǎn)3D Swiper性感秀之思路分析總結(jié)

css3的3D

發(fā)表評(píng)論

0條評(píng)論

Neilyo

男|高級(jí)講師

TA的文章

【歷史上的今天】10 月 12 日：C 語言之父逝世；西門子誕生；喬布斯推出 NeXT 電腦

兒童故事書應(yīng)用軟件FarFaria暴露3M用戶數(shù)據(jù) 涉及290萬用戶信息

騰訊開源百萬級(jí)服務(wù)發(fā)現(xiàn)和治理中心北極星

網(wǎng)絡(luò)喚醒的配置好麻煩？沒關(guān)系這里有其他簡(jiǎn)單的遠(yuǎn)程開機(jī)方法！