transform转换
-
transform与transition一样，默认都是:如果你以触发事件的方式来设置transform转换，那么默认触发结束后会还原样式值(3D是直接设置也会还原) - 如果想让转换完之后，保留效果不还原，需要在父元素中设置
transform-style:flat||preserve-3d。它的作用是让该元素的子元素转换后保留效果，flat是默认值不保留效果，preserve-3d是保留3D效果
2D转换
- 2D移动
-
transform:translate(x,y)使元素参照元素自身的左上角作X轴和Y轴的移动，写一个值默认是设置X轴 - 如果你只想设置一个方向移动，那么将另一个值设置为0，或者直接写
translateX、translateY都行 - 如果translate中传入百分比，那么参照的值是自身的宽高，所以
translate(-50%,-50%)配合定位的边偏移值也能实现水平垂直居中
-
- 2D缩放
-
transform:scale(x,y)使元素参照自身几何中心(就是元素的正中心)进行缩放，值>1.01表示放大，值<0.99表示缩小，注意元素缩放不会影响其他元素的正常布局 - 如果写一个值默认是x轴和y轴同比例缩放，想单个设置可以用
scaleX和scaleY
-
- 2D旋转
-
transform:rotate(xx角度)使元素参照对象原点，做2D旋转 - 如果值是正值那么顺时针旋转，是负值逆时针旋转。2d旋转实际上就是参照Z轴做旋转。另外旋转会将坐标轴也旋转，所以一定不要先旋转再移动
-
- 设置旋转轴心点
-
transform-origin(坐标或者方位词)元素旋转默认是参照正中心点，使用这个方法可以修改元素旋转参照的对象原点 - 参数可以写坐标值，也可以写方位词
-
- 2D斜切
-
transform:skew(x角度，y角度)使元素参照对象原点，做2D倾斜。如果角度值是正值往逆时针倾斜，如果角度值是负值往顺时针倾斜。设置两个值会先X轴倾斜，再Y轴倾斜 - 如果想单个设置可以用
skewX和skewY - 注意斜切和旋转不一样，旋转只是转变角度不改变元素形状，但是斜切只是改变元素形状不旋转。斜切实际工作中用得较少
-
- 为某个元素同时添加多个transform属性，直接连写用空格分隔
3D转换
- 3D实际上就是在2D的基础上多加了一条Z轴，Z轴是与屏幕垂直的。通过水平X轴、垂直Y轴、与屏幕垂直的Z轴，就组成了三维里立体的空间
- 3D移动
-
transform:translate3d(x,y,z)让元素以3D的方式来移动，注意这样写3个参数必须写全 - 如果你不想设置两条轴的值，可以写0，或者分别写
translateX、translateY、translateZ
-
- 3D缩放
-
transform:scale3d(x,y,z)让元素以3D的方式来缩放，注意这样写3个参数必须写全 - 如果你不想设置两条轴的值，可以写0，或者分别写
scaleX、scaleY、scaleZ
-
- 3D旋转(难点)
-
transform:rotate3d(x,y,z,角度值)让元素以3D的方式来旋转 - 如果只想单独参照某条轴作旋转，也可以写
rotateY(角度)、rotateX(角度)、rotateZ(角度) - 以下是对前三个参数的详解：
- x，y，z实际上三条轴上的向量值，什么是向量值呢？相当于在轴上拉出设置值距离的线，然后让元素的旋转轴心跟这条线方向一样来进行旋转，一般要设置值都是1
- 例如：设置x轴y轴相同的向量值，那么实际上产生的是一条平面的对角线。设置三条轴相同的向量值，那么产生的是一条立方体的对角线
- 向量值的大小在当前轴没有任何影响，但如果多条轴的大小不一样，那么会改变轴心线的角度
- 三维的东西通过文字很难描述和理解，建议通过案例图形来帮助理解
- 左手法则：大拇指指向当前坐标轴的往后延伸的方向 ，手指环绕的方向就是正方向
-
景深透视
-
perspective:xxp为元素添加一个景深透视距离，默认是0没有效果。它的默认透视角度实在Z轴等于0的那一面位置。如果设置的值小于你的立方体各条变宽度，就相当于在立方体内部观察整个盒子。如果大于或等于就相当于在外部看到盒子 -
perspective-origin:x,y以镜头的角度来观察立方体，默认是在立方体的最中心点，通过设置x和y的值来调整镜头角度 - 这两个属性一般用得很少，了解即可
动画
- css3中自带了动画功能，也叫关键帧动画。动画本质上与过渡没有区别都是让某个元素移动的位置的时候，以动画的方式
- 但是过渡只能设置开始关键帧和结束关键帧，动画却可以通过关键字
@keyframes以耗时百分比的形式来设置多个关键帧，实现多段动画移动的效果 -
animation-name:设置好的动画名字在css3里动画不是直接设置，而是在外面通过关键字设置好，然后通过这个属性调用动画 -
animation-duration:xxs动画耗时 -
animation-iteration-count:x设置动画重复执行次数，如果设置infinite就是无限重复执行 -
animation-deraction:alternate设置动画交替播放，即执行完一次后，终点和初始点互换再执行，然后这样反复交替执行 -
animation-delay:xs设置动画延迟多少秒再执行 -
animation-fill-mode设置动画结束时的状态，动画默认执行完也会还原，三个属性介绍：-
forwards动画结束后保留其位置 -
backwards动画结束后不保留位置，但是如果该动画同时设置了延时以及初始样式，那么该属性会让元素立即进入初始样式 -
both综合了上面两个的特点，即会保留位置，设置了延时和初始样式也会立刻进入
-
-
animation-timing-function:linear||ease||steps与过渡一样，设置动画执行的效果，匀速还是先快后慢还是一步一步执行 -
animation-play-state:running||paused设置动画的播放和暂停，一般配合js来使用 - 时钟案例运用知识点较多，需要多理解透彻
web字体和字体图标
- web字体
- 在以前想要在页面上使用特殊字体，并显示到网页上必须用户设备上有对应字体才可以。现在css3新增了webfont功能，可以在页面上显示任意特殊字体，而跟用户设备没有关系
- 使用方法很简单
- 到相关web字体网站上生成你想展示的特殊字体，并下载
- 在代码中使用
@font-face关键字声明定义特殊字体 - 定义特殊字体样式
- 调用特殊字体样式
- 注意：web字体的生效只限于你生成的那几个字，并不是所有字体都能使用该样式，所以生成和使用时都要明白哪些字需要使用特殊字体
- 字体图标
- 字体图标本质上就是字体，不过是以图标的形式展示，因是矢量字体，所以字体图标可以任意设置大小颜色，不会像图片那样失帧
- 使用方法与web字体有点相似，都是从相关网站上下载对应字体图标，并通过关键字声明字体，再定义样式并调用
- 但是要注意：因为字体图标是Unicode编码的形式，不方便阅读。所以最常见的使用方式是通过伪元素的方式来实现。定义一个与字体图标意义相关的类名，让该类名以伪元素的形式加入字体图标，再调用该类名即可。
- 伪元素里
content属性写unicode编码的时候，用\反斜杠来代替&#x
- web字体和字体图标在实际工作中都是很常用的，要记住怎么用。
iconfont是个很不错的生成网站
多列布局
- 随着现在屏幕越来越大，宽度已经延伸了非常多。如果还像以前那样一行到底的显示文字，用户可能看两三行就视觉疲劳不看了。也因此，css3新增的多列布局属性，通过设置让本来通行的文字，分成几列来排列
-
column-count:x该值为数值，当你为一段长文本设置此属性时，数值是几就分成几列，宽度平均分配 -
column-ruler: 粗细 线类型 颜色设置每列间隙的样式，书写方式和边框一模一样 -
column-gap:xxpx设置每列间距大小 -
column-width:xxpx设置每列宽度，如果同时设置了列数和宽度，那么它会取大优先。就是说如果设置的宽度比平均分配的宽度大，那么应用这个样式。反之，应用列数样式。还有一点：分列之后，会自动填满整个屏幕，所以也可能出现实际宽度比你设置宽度大的情况 -
column-span:1||all设置跨列显示，要么只显示在一列，要么横跨所有列
