這篇文章主要講解了“怎么用Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔”吧！

目前創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、屏南網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

css是個(gè)神奇的東西，在學(xué)習(xí)的過程中你會(huì)發(fā)現(xiàn)繪畫和藝術(shù)的美,金字塔是世界八大奇跡之一，設(shè)計(jì)精巧，計(jì)算精密，令世人贊嘆。那么如何用CSS畫一個(gè)金字塔呢?

人丑話不多，先看一下效果

? 思路

金字塔是由5個(gè)面組成的，即4個(gè)側(cè)面和1個(gè)底面。我們可以把它看作是一個(gè)童年時(shí)期玩過的元寶，或者端午節(jié)戴在身上的福字。為什么這么說呢?

“橫看成嶺側(cè)成峰”，我們看金字塔的俯視圖是不是會(huì)看到這樣一個(gè)圖形，如下圖所示

這是一個(gè)平面圖形，如果讓這個(gè)平面圖形具有立體的效果不就是一個(gè)金字塔了么。即將上圖的(0,0)沿著x軸旋轉(zhuǎn)一定角度即可實(shí)現(xiàn)。

? 繪制

接下來就是繪制“元寶”的形狀,側(cè)面是4個(gè)三角形，底面是一個(gè)正方形。實(shí)現(xiàn)三角形可以采用clip-path的屬性對(duì)可視區(qū)域進(jìn)行裁剪。

由上圖可知：clip-path的只能兼容高版本瀏覽器。polygon代表多邊形，所以利用該屬性可以繪制多如下圖形：

clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 50%);

 

clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 

有了上述的圖形之后，我們需要進(jìn)行特殊的處理，才能得到我們想要的形狀。因?yàn)槲覀円罱ń鹱炙形覀兯叺母叨然蛘邔挾刃枰笥诘撞康膶挾群烷L(zhǎng)度，不然的話無法搭成塔尖而形成如下圖形：

故需設(shè)置大于底部寬和高,我們這里選取為高度為200px，寬度為100px，寬度需要和底部寬度保持一致。

假設(shè)我們現(xiàn)在已經(jīng)有一個(gè)金字塔，我們可以取它的一個(gè)橫截面如下圖：

通過sin函數(shù)

解上面反三角函數(shù)求得A大約為75deg，以此類推我們可以算出其他圖形旋轉(zhuǎn)角度。

將上述的兩種三角形通過適當(dāng)?shù)钠揭坪托D(zhuǎn)，得到如下圖形：

transform:translateZ(-50px) translateY(-100px) rotateX(-75deg); height: 200px; transform-origin: 0 100%; clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 

transform: rotateX(-180deg) translateZ(50px);

 

height: 200px; transform-origin: 0 100%; transform: translateZ(-50px) translateY(-200px) rotateX(-105deg); clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);

 

width: 200px; transform-origin: 100% 100%; transform: translateZ(-50px) translateX(-200px) rotateY(105deg); clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);

 

width: 200px;transform-origin: 100% 100%;transform: translateZ(-50px) translateX(-100px) rotateY(75deg);clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);

 

合并之后得到如下圖形

通過使用css3中的3D轉(zhuǎn)化屬性，將上圖進(jìn)行轉(zhuǎn)化即可：

transform:rotateX(70deg) rotateZ(45deg); transform-style:preserve-3d; animation:rate 10s linear infinite;

 

由上圖可知：transform-style:preserve-3d兼容是支持高版本瀏覽器，支持部分ie瀏覽器

感謝各位的閱讀，以上就是“怎么用Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：怎么用Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔
文章鏈接：http://chinadenli.net/article0/gdgiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、全網(wǎng)營(yíng)銷推廣、軟件開發(fā)、做網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)