css 动画（一）transform 变形
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
有段时间我是没理清 transform、translate、transition 和 animation之间的关系的，现在整理一下：
- translate：平移；是 transform 的一个属性；
- transform：变形；是一个静态属性，可以改变元素的形状或位置，做出 2d 或 3d 效果；
- transition：过渡，转变；使 css 属性值在一段时间内平滑的变化，需要有触发条件（如 hover 等），是 animation 的简化版；
- animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；
- transform，可设置 translate（位移） rotate（旋转） scale（缩放） skew（倾斜）；接受多值，用空格分开，并按照从前往后的顺序执行；
- transform-origin，可更改转换元素的基准点（默认值，元素中心，50% 50% 0）；
- transform-style，可设置 flat（默认值，2d展示）还是 preserve-3d（3d展示）；此属性必须在 transform 之后使用；
- perspective，设置元素距离视图的距离，默认为0；
- perspective-origin，设置视点（默认值，元素中心，50% 50%），必须和 perspective 结合使用；
- backface-visibility，设置元素不面向屏幕时是否可见；
translate
translate（位置平移）
- 可以为负值，向右向下是正值，向上向左是负值；
- 可以为百分比，百分比是基于元素自身宽高的（我们可以利用这一点实现 未知宽高的元素的垂直居中）；
- 2d效果可以拆开写成 translateX(x)、translateY(y)，也可以直接写成translate(x,y)，缩写中如果只写了一个值，默认是x；
- 3d效果还有 translateZ(z)，缩写 translate3d(x,y,z)，3d效果中缩写的话，就必须得写3个值，少一个都不行，没有的值可以设为0；
rotate
rotate（旋转）
- 可以设负值；正值是顺时针旋转，负值是逆时针旋转；
- 可以写成 rotateX(deg)、rotateY(deg)、rotateZ(deg)；（角度的单位，负30度就是-30deg）
scale
scale（缩放）
- 可以是整数，也可以是小数，也可以设置负值；
- 可以写成 scaleX(x)、scaleY(y)、scaleZ(z)，也可以缩写成 scale(x,y) 或者 scale3d(x,y,z)；
- 当某值设为0时，就看不见元素了，但是空间还在，和 visibility:hidden 效果一样；
- 当设置负值的时候，会发生翻转的效果；
- 缩放看起来虽然大小变化了，但占据的空间不变，不会影响布局；
<style type="text/css"> * { padding: 0; margin: 0; } .wrapper { width: 300px; margin: 100px 0 0 100px; border: 10px solid red; } .test { width: 200px; height: 200px; display: inline-block; background: #0ff; transform: scale(.5, -1); border: 1px solid #f60; } .test img { max-width: 100%; } </style> <div class="wrapper"> <span class="test"><img src="images/1.jpg" /></span> <span>scale可以设置小数，也可以设置负值；虽然大小看起来变化了，但占据的空间不变，不会影响布局</span> </div>
skew
- 可以写成 skewX(deg)、skewY(deg)，也可以缩写成 skew(x,y)，缩写如果只写了一个值，那就默认仅仅只是 x 轴；
- 目前没有 Z 轴的倾斜；
- 围绕 X 轴倾斜，会保持高度不变，拉长元素，产生变形；
- 围绕 Y 轴倾斜，会保持宽度不变；
- 可以写负值，（下图为X轴的正值和负值）；
<style type="text/css"> * { padding: 0; margin: 0; } .wrapper { width: 300px; height: 300px; position: relative; margin: 100px 0 0 100px; border: 1px solid red; background: #0ff; } .test { width: 150px; height: 60px; position: absolute; left: 30%; top: 30%; background: #f60; transform: skewX(-45deg); } </style> <div class="wrapper"> <div class="test"></div> </div>
transform-origin
设置转换元素的基准点，然后元素的变形就围绕这个点展开；
- 默认值是元素中心（50% 50% 0）；
- X 和 Y 轴可以设置单位值、百分比、left | center | right | top | bottom；Z轴只能设置具体单位值；
- 可以设置1-3个值，用空格隔开，如果只写了1个，那么仅仅只是X轴；2个的话，就是 X 轴和 Y 轴；
transform-style
设定元素及其子元素怎样在三维空间中展示；
- 默认值，flat，2d平面；设置为 preserve-3d，就是3d空间；
- 当元素设置 overflow:hidden 的时候，preserve-3d 失效；
- 一般我们在元素的父元素身上使用，因为此属性可以继承；
prespective
设置元素距离视图的距离，
- 默认为 none（0）；可设置具体值，以像素为单位，不能为负值；
- 我们看远处的物体，会发现看不清，当我们走近一点的时候，就看得清除了，此属性可以理解为我们站的位置离物体的距离；
- 我们一般在变形元素的父元素身上使用，因为浏览器会为其子元素产生透视效果，不会为它本身产生透视效果；设置了此属性的元素我们也叫透视元素；
prespective-origin
设置视点；
- 默认值（50% 50%），可设置单位值、百分比、left | center | right | top | center | bottom ；
- 可以设置1-2个值，设置1个值时，另一个默认为 center；
- 可以理解为我们看妹子的时候看的哪个位置，脸？腿？胸？
- 此属性必须定义在设置了 prespective 属性的元素身上；
backface-visibility
设置当元素不面向屏幕时，是否可见；如果旋转元素不希望看见其背面时，此属性很好用；
- 默认 visible，可设置 hidden；
正方体后面要绕 Y 轴旋转180度，我一开始没想起来，调了很久；
<style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } /*定义舞台容器*/ .panel { width: 800px; margin: 100px auto; perspective: 1300px; /*定义视距*/ } .panel:hover ul { transform: rotateY(60deg)rotateZ(45deg); } /*立方体*/ ul { width: 100px; height: 100px; margin: auto; position: relative; transform-style: preserve-3d; /*定义该立方体是个3D元素*/ transform: rotateX(-30deg) rotateY(20deg); transition: all 2s; cursor: pointer; } /*立方体六个面*/ li { width: 100px; height: 100px; position: absolute; top: 0; left: 0; font: 30px/100px "微软雅黑"; text-align: center; color: #fff; backface-visibility: hidden; } .front { transform: translateZ(50px); background: rgba(0, 255, 0, .6); } .back { transform: translateZ(-50px) rotateY(180deg); /*后面要旋转绕Y轴180度，我一开始没想起来，调了很久*/ background: rgba(255, 0, 255, .6); } .left { transform: translateX(-50px) rotateY(-90deg); background: rgba(0, 0, 255, .6); } .right { transform: translateX(50px) rotateY(90deg); background: rgba(255, 255, 0, .6); } .top { transform: translateY(-50px) rotateX(90deg); background: rgba(255, 0, 0, .6); } .bottom { transform: translateY(50px) rotateX(-90deg); background: rgba(0, 255, 255, .6); } </style> <div class="panel"> <ul> <li class="top">上</li> <li class="bottom">下</li> <li class="left">左</li> <li class="right">右</li> <li class="front">前</li> <li class="back">后</li> </ul> </div>
大神还整理了 transform 的副作用，请点击：
- 设置了 transform:非none; 的元素，可以覆盖标准流元素和低级别的定位元素；
- webkit 内核浏览器下，如果父元素设置了 transform:非none; 那么子元素的fixed效果会变成 absolute 效果；
- 更改定位父级 position:absolute; 定位的是祖先元素中第一个 position:非static 的元素；但是如果祖先元素中有设置了 transform:非none；也可以被定位为父级
