css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？
人丑话不多，先看一下效果
金字塔是由5个面组成的，即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？
“横看成岭侧成峰”，我们看金字塔的俯视图是不是会看到这样一个图形，如下图所示
这是一个平面图形，如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。
接下来就是绘制“元宝”的形状,侧面是4个三角形，底面是一个正方形。实现三角形可以采用 clip-path 的属性对可视区域进行裁剪。
由上图可知： clip-path 的只能兼容 高版本浏览器 。polygon代表多边形，所以利用该属性可以绘制多如下图形：
有了上述的图形之后，我们需要进行特殊的处理，才能得到我们想要的形状。因为我们要搭建金字塔，所有我们塔边的高度或者宽度需要大于底部的宽度和长度，不然的话无法搭成塔尖而形成如下图形：
故需设置大于底部宽和高,我们这里选取为高度为200px，宽度为100px，宽度需要和底部宽度保持一致。
假设我们现在已经有一个金字塔，我们可以取它的一个横截面如下图：
通过sin函数
解上面反三角函数求得A大约为75deg，以此类推我们可以算出其他图形旋转角度。
将上述的两种三角形通过适当的平移和旋转，得到如下图形：
合并之后得到如下图形
通过使用css3中的3D转化属性，将上图进行转化即可：
由上图可知：transform-style:preserve-3d兼容是支持高版本浏览器，支持部分ie浏览器
以上就是本文的全部内容，全部都是由css实现包括：
1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X)
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left\right
例子: transform-origin: left top 元素将在元素的左上角为原点进行旋转运动
transform: scale(X)
可以通过改变元素的该属性,导致元素进行X倍的缩放X为负数时将会产生镜面效果
例子: transform: scale(1.2) 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg)
可以在发生transform的元素中设置transition属性
例子: transition: 1s 代表触发元素发生变化后,变化将于1s内完成
