首先，我们先看一看效果： 在线演示
四种最基本的转换：移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）,混合在一起做复杂变化
知识梳理： 使用这些操作变化就要使用css属性 transform：
translate(x,y);两个参数x,y ;可以是百分数（%），其他尺寸单位。一个参数没有效果。
rotate(15deg);旋转度数，牵扯到另一个属性transform-origin,改变元素变化的位置。
scale（2,2） 缩放倍数，width和height,当两个参数一样的时候，可以只写一个。
skew(15deg,15deg) 沿X轴倾斜15度，沿Y轴倾斜15度，
通过设置以上这些属性，可以改变元素的位置，变化。但是我们看不出来它的过程，还需要设置属性transition：
transition: all //变化元素属性 一般都设置为 all ，不用考虑挨个属性设置 3s //3s完成， 以秒为单位 ease //变化效果 ease 渐渐变快 linear 1s ; //1秒之后执行动画通过以上这些可以完成简单的元素变化了
再配合css3 动画可以做出更炫的效果： 使用@keyframes来定义动画，让元素的属性从某个状态变化到另一个状态：
@keyframes myanimate{ 0%{ width:0; } 50%{ width:50%; } 100%{ width:100%; } }还可以分的更细，加更多的属性进来， 下来使用定义的动画，
div{ animation:myanimate 3s; }设置3s完成这个动画。animation还有其他的属性设置，和transition有相似之处。还可以规定动画播放的次数，是否逆向播放，状态（比如鼠标hover时设置停止播放动画）
下面通过代码查看例子中的响应式设置：
@media screen and (max-width:600px){ figure{100%} //一行显示一张图片 } @media screen and (min-width:601px) and(max-width:1000px){ figure{50%}; //一行展示两张图片 } @media screen and(min-width:1001px){ figure{33.33%}; //显示三张图片 }2. 给同一个标签的多个元素设置动画效果，比如依次进入。使用伪类：nth-of-type(),获取到同级元素。
.photo_1 figcaption p:nth-of-type(1){ transition-delay:0.05s; //第一个p元素0.05秒进入 } .photo_1 figcaption p:nth-of-type(2){ transition-delay:0.15s; //第二个p秒0.15 秒进入 } .photo_1 figcaption p:nth-of-type(3){ transition-delay:0.25s; //第三个p元素0.25秒进入 }3. 正对浏览器内核不同，兼容性处理，在心标签元素前加入前缀即可
-webkit- //chrome,safari,(搜狗和360浏览器都是双核的，测试时调整为极速模式)-o- //opera-ms-当然，一些标签属性不断地出现，这些浏览器也都在不断更新，以适应这些新标签，而且大都支持。
