建站
咨詢
售后
建站咨詢
新聞中心
css是個神奇的東西，在學(xué)習(xí)的過程中你會發(fā)現(xiàn)繪畫和藝術(shù)的美,金字塔是世界八大奇跡之一，設(shè)計(jì)精巧，計(jì)算精密，令世人贊嘆。那么如何用CSS畫一個金字塔呢?
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),寶安企業(yè)網(wǎng)站建設(shè),寶安品牌網(wǎng)站建設(shè),網(wǎng)站定制,寶安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寶安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
人丑話不多，先看一下效果
思路
金字塔是由5個面組成的，即4個側(cè)面和1個底面。我們可以把它看作是一個童年時期玩過的元寶，或者端午節(jié)戴在身上的福字。為什么這么說呢?
“橫看成嶺側(cè)成峰”，我們看金字塔的俯視圖是不是會看到這樣一個圖形，如下圖所示
這是一個平面圖形，如果讓這個平面圖形具有立體的效果不就是一個金字塔了么。即將上圖的(0,0)沿著x軸旋轉(zhuǎn)一定角度即可實(shí)現(xiàn)。
繪制
接下來就是繪制“元寶”的形狀,側(cè)面是4個三角形，底面是一個正方形。實(shí)現(xiàn)三角形可以采用clip-path的屬性對可視區(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)槲覀円罱ń鹱炙?，所有我們塔邊的高度或者寬度需要大于底部的寬度和長度，不然的話無法搭成塔尖而形成如下圖形：
故需設(shè)置大于底部寬和高,我們這里選取為高度為200px，寬度為100px，寬度需要和底部寬度保持一致。
假設(shè)我們現(xiàn)在已經(jīng)有一個金字塔，我們可以取它的一個橫截面如下圖：
通過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瀏覽器
總結(jié)
以上就是本文的全部內(nèi)容，全部都是由css實(shí)現(xiàn)包括：
- 定位：position
- 圖形裁剪：clip-path
- 元素3D轉(zhuǎn)化：transform
- 動畫：animation
網(wǎng)站欄目：純Css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/dhspshg.html
