純css實(shí)現(xiàn)旋轉(zhuǎn)的金字塔
點(diǎn)擊上方“前端簡(jiǎn)報(bào)”，選擇“設(shè)為星標(biāo)”
第一時(shí)間關(guān)注技術(shù)干貨！
人丑話(huà)不多，先看一下效果
? 思路
“橫看成嶺側(cè)成峰”，我們看金字塔的俯視圖是不是會(huì)看到這樣一個(gè)圖形，如下圖所示
這是一個(gè)平面圖形，如果讓這個(gè)平面圖形具有立體的效果不就是一個(gè)金字塔了么。即將上圖的(0,0)沿著x軸旋轉(zhuǎn)一定角度即可實(shí)現(xià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)槲覀円罱ń鹱炙?，所有我們塔邊的高度或者寬度需要大于底部的寬度和長(zhǎng)度，不然的話(huà)無(wú)法搭成塔尖而形成如下圖形：
故需設(shè)置大于底部寬和高,我們這里選取為高度為200px，寬度為100px，寬度需要和底部寬度保持一致。
假設(shè)我們現(xiàn)在已經(jīng)有一個(gè)金字塔，我們可以取它的一個(gè)橫截面如下圖：
通過(guò)sin函數(shù)
將上述的兩種三角形通過(guò)適當(dāng)?shù)钠揭坪托D(zhuǎn)，得到如下圖形：
transform:translateZ(-50px) translateY(-100px) rotateX(-75deg);height: 200px;: 0 100%;: 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%);
合并之后得到如下圖形
通過(guò)使用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é)
以上就是本文的全部?jī)?nèi)容，全部都是由css實(shí)現(xiàn)包括：
定位：position
圖形裁剪：clip-path
元素3D轉(zhuǎn)化：transform
動(dòng)畫(huà)：animation
??戳“閱讀原文”， 看效果！