CSS第三天笔记

css3第三天
3d转换

1. 左手坐标系
2. 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。
   这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z 轴的正方向。
   如下图
   
   2. CSS 中的 3D 坐标系
   CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X
   轴旋转了 180 度，如下图
   
   借助示例理解 3D 转换
   绕X 轴旋转，见代码示例 3D 转换-旋转rotateX.html
   
   
   
   绕Y 轴旋转，见代码示例 3D 转换-旋转rotateY.html
   
   
   
   绕Z 轴旋转，见代码示例 3D 转换-旋转rotateZ.html
   
   
3. 左手法则
   左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。
   4. 透视（perspective）
   电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D 效果），其实只是一
   种视觉呈现，通过透视可以实现此目的。
   透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。注：并非任何
   情况下需要透视效果，根据开发需要进行设置。
   perspective 有两种写法
   作为一个属性，设置给父元素，作用于所有 3D 转换的子元素
   作为transform 属性的一个值，做用于元素自身
   5. 理解透视距离
   
   
   透视会产生“近大远小”的效果
   3D呈现（transform-style）
   设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
   flat：所有子元素在 2D 平面呈现
   preserve-3d：保留 3D 空间
   3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置
   transform-style: preserve-3d 来使其变成一个真正的 3D 图形。
   7. backface-visibility
   设置元素背面是否可见
   CSS3 动画库
   动画
   动画是CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或
   一组动画，常用来实现复杂的动画效果。
   1、必要元素：
   a、通过@keyframes 指定动画序列；
   b、通过百分比将动画序列分割成多个节点；
   c、在各节点中分别定义各属性
   d、通过 animation 将动画应用于相应元素；
   2、关键属性
   a、animation-name 设置动画序列名称
   b、animation-duration 动画持续时间
   c、animation-delay 动画延时时间
   d、animation-timing-function 动画执行速度，linear、ease 等 e、animation-play-state 动画播放状态，running、paused 等
   f、animation-direction 动画逆播，alternate 等
   g、animation-fill-mode 动画执行完毕后状态，forwards、backwards 等
   h、animation-iteration-count 动画执行次数，inifinate 等
   i、steps(60) 表示动画分成 60 步完成参数值的顺序：
   关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
   伸缩布局
   CSS3 在布局方面做了非常大的改进，使得我们对块级元素的布局排列
   变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大
   的作用。
   如下图，学习新的概念：
   主轴：Flex 容器的主轴主要用来配置Flex 项目，默认是水平方向侧轴：与主
   轴垂直的轴称作侧轴，默认是垂直方向的
   方向：默认主轴从左向右，侧轴默认从上到下
   主轴和侧轴并不是固定不变的，通过flex-direction 可以互换。
   1、必要元素：
   a、指定一个盒子为伸缩盒子 display: flex
   b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
   c、明确主侧轴及方向
   d、可互换主侧轴，也可改变方向
   2、各属性详解
   a、flex-direction 调整主轴方向（默认为水平方向）
   b、justify-content 调整主轴对齐
   c、align-items 调整侧轴对齐
   d、flex-wrap 控制是否换行
   e、align-content 堆栈（由flex-wrap 产生的独立行）对齐
   f、flex-flow 是flex-direction、flex-wrap 的简写形式
   g、flex 子项目在主轴的缩放比例，不指定flex 属性，则不参与伸缩分配
   h、order 控制子项目的排列顺序，正序方式排序，从小到大
   此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参
   考示例源码。
   多列布局
   类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。
   Web 字体
   开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否
   安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
   支持程度比较好，甚至IE 低版本浏览器也能支持。
   字体格式
   字体格式
   不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式
   的知识。
   1、TureType(.ttf)格式
   .ttf 字体是Windows 和Mac 的最常见的字体，是一种 RAW 格式，支持这种字
   体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、
   Safari4.2+；
   2、OpenType(.otf)格式
   .otf 字体被认为是一种原始的字体格式，其内置在TureType 的基础上，支持
   这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS
   Mobile、Safari4.2+；
   3、Web Open Font Format(.woff)格式
   woff 字体是Web 字体中最佳格式，他是一个开放的TrueType/OpenType 的压缩
   版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、
   Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
   4、Embedded Open Type(.eot)格式
   .eot 字体是IE 专用字体，可以从 TrueType 创建此格式字体，支持这种字体
   的浏览器有IE4+；
   5、SVG(.svg)格式
   .svg 字体是基于SVG 字体渲染的一种格式，支持这种字体的浏览器有
   Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
   了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体， 通常
   我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间
   的区别差异。
   推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
   字体图标
   其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把
   图片制作成字体呢？
   答案是肯定的。
   常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包， 然后
   就可以像使用文字一样使用图标了。
   优点：
   1、将所有图标打包成字体库，减少请求；
   2、具有矢量性，可保证清晰度；
   3、使用灵活，便于维护；
   Font Awesome 使用介绍http://fontawesome.dashgame.com/ 定制自已的字体
   图标库http://iconfont.cn/ https://icomoon.io/
   SVG 素材
   http://www.iconsvg.com/
   兼容性
   通过http://caniuse.com/ 可查询CSS3 各特性的支持程度，一般兼容
   性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻
   意去处理CSS3 的兼容性问题。