概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate
1、旋转，利用rotate来实现，代码如下：
-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg)指定firefox浏览器私有属性
transform:rotate(10deg)一般浏览器翻转的角度为10弧度
2、 翻转，利用scale来实现，代码如下：
scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转
-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转
transform:scale(-1，1)水平轴为-1，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
transform:scale(1，-1)垂直轴为-1，代表垂直翻转
"推荐你个系列的教程吧--《Buid New World》第十一集：使用 CSS 增加过渡和其他效果 平移translate，将元素平行移动，参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。旋转，rotate允许你通过传一个角度值来旋转一个元素。
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
倾斜，skew可以将一个对象围绕着x和y轴按照一定的角度倾斜，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
"
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实现包括：
