以下内容均来自于李炎恢的html5讲义
一、变形效果
1、2d平面的变形
CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和transform-origin。
对于transform 的属性值，具体如下表：
//向水平和垂直各移动200 像素，也可以使用百分比
transform: translate(200px,200px);//向水平平移200 像素，不加后面的0 也可以
transform: translate(0,200px);
transform: translateY(200px);
//水平、垂直方向放大1.5 倍transform: scale(1.5);transform: scale(1.5,1.5); //水平、垂直方向缩小0.8 倍transform: scale(0.8,0.8);//水平方向放大1.5 倍
transform: scaleX(1.5);//垂直方向放大1.5 倍
transform: scaleY(1.5);//旋转元素，0 ~ 360 度之间，负值均可
transform: rotate(-45deg);//倾斜元素，0 ~ 360 度之间，负值均可
transform: skew(45deg, 20deg);//水平倾斜元素，0 ~ 360 度之间
transform: skewX(45deg);
//垂直倾斜元素，0 ~ 360 度之间，负值均可
transform: skewY(45deg);//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧
transform: matrix(1,0,0,1,30,30);//不同的值可以累计，通过空格分割
transform: rotate(-45deg) scale(1.5);transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。
具体设置方案参考如下表：
//默认值，以中心点变形
transform-origin: center center;transform-origin: 50% 50%;//以左上角为基准点变形
transform-origin: left top;transform-origin: 0px 0px;浏览器版本
//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: left top;
-moz-transform-origin: left top;-o-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;
2、3d平面的变形
由于3D 是立体三维，在x、y 轴的基础上一般会多出一个z 轴，深入跃出轴。以下是
3D 变形的属性值表
3D 变形比2D 变形出来的要晚一些，所以如果需要兼容旧版本浏览器，可以对照这个表。
具体如下：
//兼容版本完整形式
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);-o-transform: translateZ(200px);-ms-transform: translateZ(200px);transform: translateZ(200px);
transform-style 属性是指定嵌套元素如何在3D 空间中呈现。
//一般设置到当前元素的父元素
transform-style: preserve-3d;需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各
种厂商前缀。
perspective 是3D 变形的重要属性，该属性会设置查看者的位置，并将可视内容映射
到一个视锥上，继而投放到一个2D 平面上。
//设置查看者的距离位置，一般设置在元素的父元素上
perspective: 1000px;需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各
种厂商前缀。
我们运用前面3D 功能属性transform-style 和perspective 来构建3D 变形效果。
1.translate3d(x,y,z)
//需要3D 位移的HTML 结构，必须有父元素包含<div id="a"><img src="img.png" alt="" /></div>//CSS 部分，父元素设置3D 呈现且设置透视距离
#a { perspective: 1000px;transform-style: preserve-3d;}img { //z 轴可以是负值transform: translate3d(300px,100px,240px);}
2.translateZ(z)
//可以单独设置z 轴，z 轴可以是负值img { transform: translateZ(240px);}3.scale3d(x,y,z)
//3D 缩放，单独设置无效，需要配合角度img { transform: scale3d(1,1,1.5) rotateX(45deg);}
4.scaleZ(z)
//单独设置z 轴，x 和y 轴默认为1img { transform: scaleZ(1.5) rotateX(45deg);}
5.rotate3d(x,y,z,a)
//设置3D 旋转，a 表示角度，xyz 是0 或1 之间的数值transform: rotate3d(1,0,0,45deg)6.rotateX(a)、rotateY(a)、rotateZ(a)
//单独设置3D 旋转transform: rotateX(45deg);transform: rotateY(45deg);transform: rotateZ(45deg);transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
二 css3过渡效果
过渡效果一般是通过一些简单的CSS 动作触发平滑过渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了transition 属性来实现这个过渡功能，主要属性如下表：
三、css3新增的多列布局
columns
//完整形式
-webkit-columns: 150px 4;-moz-columns: 150px 4;columns: border-box;