语法： transform:rotate(旋转)、scale(缩放)、skew(倾斜)、translate(位移)；
- rotate(旋转) 元素在旋转过程中xyz轴也发生变化；
- ratatex(90deg)<=>rotate(1,0,0,90deg)沿x轴旋转；
- rotate(-90deg)<=>rotate3d(0,1,0,-90deg)沿y轴方向旋转；
- rotate2(180deg)<=>rotate3d(0,0,1,180deg)沿z旋转；
- rotate(60deg)不指定轴时，2d平面旋转；
2.scale(缩放)
- scalex(1.5)<=>scale3d(1.5,1,1)沿x轴缩放，默认为1，大于1时放大，小于1时缩小；
- scaley(0.5)<=>scale3d(1,0.5,1)沿y轴缩放，默认为1，大于1时放大，小于1时缩小；
- scalez(1.5)<=>scale3d(1,1,1.5)沿z轴缩放；
- scale(z)不指定轴时，2d平面x轴的y轴同时缩放；
- skew(倾斜)
- skewx(30deg)沿x轴倾斜；
- skewy(-30deg)沿y轴倾斜；
- skew(30deg)不指定轴时，默认沿X轴倾斜；
- skew(30deg,30deg)<=>skewx(30deg) skewy(30deg)x轴和y轴同时倾斜；
- translate(位移)
- translatex(100px)<=>translate3d(100px,0,0)正值向右，负值向左；
- translatey(-100px)<=>translate3d(0,100px,0)正值向下，负值向上；
- translatez(100px)<=>translate3d(0,0,100px)正值向前负值向后；
- translate(100px)不指定轴时默认沿x轴位移
- translate(100px,100px)<=>translatex(100px)translatey(100px)x和y轴同时位移；
使用CSS3变形的方式实现已知或未知大小的元素在屏幕窗口水平垂直都居中
元素
{
position:fixed;
left:50%;
top:50%; transform:translatex(-50%)translatey(-50%)marginleft:width/2 -height/2}
使用CSS3变形的方式实现已知或未知大小的子元素在父元素中水平垂直都居中
父元素 {position:relative}
子元素 {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
改变变形元素中心点位置
语法： transform-origin:left/center/right/数值/top/cneter/bottom/数值；
变形综合
我们经常将多种变形方式综合在一起使用，顺序不同，效果有可能不同；
eg: transform: rotate(30deg)scale(3)
transform: scale(3) rotate(360deg)
顺序不同，效果不同；
eg: transform: rotate(360deg) translatex(100px)
transform: translatex(100px) rotate(360px);
顺序不同，效果不同
原因：元素在旋转的过程中轴也跟着转；
设置变形的类型
语法： transform-style:flat(2d)/preserve-3d(3d变形)
3d透视或景深
语法： perspective:数值+单位
eg: 父元素{perspective:1000px}
eg: 变形元素{transform:perspective(1000px) rotatey(60deg)}
扩展： 隐藏翻转元素的背面
语法： backface-visibility:hidden;
transition 过渡动画 只有开始-结束
- 设置要过渡的css属性
语法： transition-property:none/ident/all
none 默认值，没有属性发生过渡； ident 指定要过渡的css属性列表； all 所有发生变化的css属性都添加过渡；
2.设置过渡所需时间
语法：transition-duration:0/time;
0默认值，不过度，直接看到结果；
time 设置一个时间值，单位；
- 设置过渡延迟执行时间
语法： transition-delay:0/正值/负值
0 默认值，不延迟；
正值 按照设置的时间延迟执行动画；
负值 设置时间前的动画将会被截断；
4.设置过渡动画执行
语法：transition-timing-function:ease/linear/ease-in/ease-out/ease-in-out;
ease 默认值，缓解效果；
linear 匀速运动，缓解效果；
ease-in 加速运动，渐显效果；
ease-out 减速运动，渐隐效果；
ease-in-out 渐显渐隐效果(慢-快-慢)
5.简写方式
语法： transition:all 1s
注：只有数值型的css属性才能过渡；
注： 在过渡动画中，我们通常使用opacity:0和opacity:1;来切换元素的隐藏和显示；
animation动画
在使用animation之前，首先要定义好动画关键帧，语法如下： `@keyframes 动画名{...或... @keyframes动画名称{
- 0%{...};30%{...};100%{...}
- from 0%{...};30%{...};to 100%{...} }}`
注：定义动画关键帧兼容不同浏览器内核的兼容写法： @ -webkit- keyframes 动画名称{}
1.设置动画名称
语法： animation-name:动画名称；
2.设置动画执行时间
语法： animation-duration：0/time;
0默认值，不执行动画；
3.设置动画延迟执行时间
语法： animation-delay:0 (默认值)/正值/负值；
4.设置动画播放次数
语法： animation-iteration-count:1/正整数/infinite;
默认值，动画播放一次；
正整数 指定播放几次；
infinite 无限循环播放；
5.设置动画播放状态；
语法： animation-play-state:running/pause;
running 默认值，运动；
paused 暂停；
6.设置动画执行方式
语法：animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out/step-start/step-end/steps(n,start/end)
step-start 马上跳转动画的结束状态；
step-end 保持动画开始时状态，当动画结束时马上跳转到动画结束状态；
steps(n,start/end) n表示分几步完成
7.设置动画运动方向
语法： animation-direction:normal/reverse/alternate/alternat-reverse;
normal 默认值，正常方向运动；
reverse 反方向运动；
alternate 正反方向交替运动；
alterate-reverse 第一次反方向，然后正反方向交替运动；
8.设置动画时间之外的状态
语法： animation-fill-mode:none/forwards/backwards/both;
none 默认值 不设置动画时间之外的状态；
forwards 保持动画，结束时的状态；
backwards 保持动画开始时状态；
both 可遵循forwards和backwards两个规则；
9.animation 简写方式
语法：animation: box _ ani 5s linear infinate
扩展：倒影或镜像
-webkit-box-reflect: left/right/above(上)/below(下)偏移量 渐变；
transition和animation的区别
- transition执行需要触发条件，animation可以自动执行；
- transition动画触发一次执行一次，再次执行需要再次触发，aimation动画可以指定播放次数，甚至无限循环播放；
- transition只有开始和结束两个状态，不能定义中间的状态，animation可以定义动画的关键帧，控制中间的状态；
接下来进入CSS3背景=>
