CSS-9 transform语法与常用函数；平移/旋转/倾斜 函数；css居中-水平居中,垂直居中,上下左右居中；transition过渡动画；Animation

1_transform

1.1_认识

• 允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等

• 对于行内级非替换元素是无效的，比如对span、a元素等；
  
  

1.2_语法与常用函数

语法

类似color: rgba(x,x,x); transform后面接的是函数

常见的函数名称

  平移：translate(x, y)

  缩放：scale(x, y)

  旋转：rotate(deg)

  倾斜：skew(deg, deg)

1.3_平移：translate(x, y)

使用

• 平移：translate(x, y)概念

  移动元素在平面上的位置。

  translate本身可有翻译的意思，在物理上也可以表示平移；

• 值个数

  一个值时，设置x轴上的位移

  二个值时，设置x轴和y轴上的位移

• 值类型：

  数字：100px

  百分比：参照元素本身（ refer to the size of bounding box ）

	移动数值计算--例如：
	width:100px;	height:100px;	translate(50%);
​表示元素向右平移的距离为，自身在x轴长度*50%，即宽度100px*50%=50px；高度不变

水平居中总结

1. 行内级元素: 设置父元素的text-align: center
2. 块级元素: 设置该块级元素(宽度) margin: 0 auto;
3. 绝对定位(子绝父相)：父子元素有宽度, left0+right0+margin: 0 auto;
4. flex布局： 在父元素设置display:flex；和justify-content: center;
   
   

垂直居中总结

1. 绝对定位： 父子元素都有高度+设置子绝父相+子元素设置

   top: 0;
   bottom: 0;
   margin: auto 0;
   

   弊端:
   1> 必须使用定位(脱离标准流)

   ​ 2> 必须给父子元素设置高度

2. flex布局：在父元素设置

display:flex；
align-items: center;
/* 好处是子元素不强制要求设置高度 */

​ 弊端:
  1> 当前flex局部中所有的元素都会被垂直居中
  2> 相对来说, 兼容性差一点点(基本可以忽略)

3. 相对定位top+translate：父子元素都有高度，子元素设置以下代码
   (当父元素没有设置高度时，可设置display:flex；)

   /*  设置相对定位 */
   position: relative;
   /*  先让元素向下位移父元素的50% */
   top: 50%;
   /*  后让元素向上位移自身的50%  */
   transform: translate(0, -50%);
   

   好处：不脱标；只给该元素设置垂直居中，其他元素不影响
   弊端：父子元素都要设置高度

总结各种居中【参考文章】

《css居中-水平居中,垂直居中,上下左右居中》

https://www.cnblogs.com/xiaoxueer/p/11849997.html

1.4_缩放 - scale(x, y)

• 缩放：scale(x, y)

  scale() CSS 函数可改变元素的大小。

• 值个数

  一个值时，设置x轴上的缩放

  二个值时，设置x轴和y轴上的同时缩放

• 值类型：

  数字：

  ✓ 1：保持不变

  ✓ 2：放大一倍

  ✓ 0.5：缩小一半

  百分比：其实也是数字，100%=1，50%=0.5

1.5_旋转 - rotate()

• 值个数

  一个值，表示旋转的角度

• 值类型：

  常用单位deg：旋转的角度（ degrees ）

  正数为顺时针;

  负数为逆时针;

  例如 transform: rotate(90deg); 表示顺时针旋转90度

1.6_transform-origin(x,y)

• transform-origin：形变的原点

​   比如在进行scale缩放或者rotate旋转时，都会有一个原点。默认transform-origin(center,center)

• 一个值：

​   设置x轴的原点，y轴默认center

• 两个值：

​   设置x轴和y轴的原点

• 必须是，，或 left, center, right, top, bottom关键字中的一个

​   left, center, right, top, bottom关键字

​   length：从左上角开始计算px

​   百分比：参考元素本身大小

1.7_倾斜 - skew(x,y) 用得少

倾斜：skew(x, y)

  函数定义了一个元素在二维平面上的倾斜转换。

值个数

  一个值时，表示x轴上的倾斜

  二个值时，表示x轴和y轴上的倾斜

值类型：

  deg：倾斜的角度

  正数为顺时针

  负数为逆时针

1.8_transform设置多个值

举例子，如下

transform: translate(50px) scale(1.2) rotate(45deg);
/* 读官方文档时
        +
          +表示: 一个或者多个, 并且多个之间以空格分隔
          transform: scale() translate();

        #
          #表示: 一个或者多个, 多个之间以, 分隔
          box-shadow: 1px 1px 1px 1px #f00, 
 */

2_transition过渡动画

2.1_认识

什么是transition动画呢？

• 一种在更改CSS属性时控制动画速度的方法。

• 成为一个持续一段时间的过程，而不是立即生效的；

• 比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效

• 通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；

• 通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定

CSS transitions 可以决定

• 哪些属性发生动画效果 (明确地列出这些属性)

• 何时开始 (设置 delay）

• 持续多久 (设置 duration)

• 动画速度 (定义timing function，比如匀速地或先快后慢)。
  
  

2.2_可以做动画的CSS属性

方法一：在MDN可执行动画的CSS属性中查询

https://developer.mozilla.org/zh-N/docs/Web/CSS/CSS_animated_properties

方法二：阅读CSS属性的文档说明

在“ Animation type"说明

2.3_使用

transition 是 (transition-property，transition-duration，transition-timing-function 和 transition-delay)的简写属性【空格间隔】

transition-property：指定应用过渡属性的名称

• all：所有属性都执行动画；

• none：所有属性都不执行动画；

• CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；

transition-duration：指定过渡动画所需的时间

  单位可以是秒（s）或毫秒（ms）

transition-timing-function：指定动画的变化曲线

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

transition-delay：指定过渡动画执行之前的等待时间

2.4_几个英语词汇的区分

transform是形变：

  一个CSS属性，该CSS属性用于设置形变；

  后面的值是形变的函数，比如scale、rotate、translate；

translate是其中一个transform-function

  用于对元素进行平移；

transition是过渡的意思

  它本身也有转变的含义，但是更多表示的是过渡的过程；

3_Animation

3.1_认识

transition过渡动画，有如下的缺点：

• 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；

• 不能重复执行，除非一再触发动画；

• 在特定状态下会触发才能执行，比如某个属性被修改了；

  希望有更多状态的变化，使用CSS Animation

CSS Animation的使用分成两个步骤：

  步骤一：使用**@keyframes**定义动画序列（每一帧动画如何执行）

  步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

3.2_@keyframes规则

可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：

• 关键帧使用percentage来指定动画发生的时间点；

• 0%表示动画的第一时刻，100%表示动画的最终时刻；

• 因为这两个时间点十分重要，所以还有特殊的别名：from和to；

也就是说可以使用from和to关键字：

• from相当于0%

• to相当于100%
  
  

3.3_Animation属性

animation 属性是 (animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state) 属性的一个简写属性形式**

• animation-name：指定执行哪一个关键帧动画名称

• animation-duration：指定动画的持续时间

• animation-timing-function：指定动画的变化曲线

• animation-delay：指定延迟执行的时间

• animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画

• animation-direction：指定方向，常用值normal和reverse

• animation-fill-mode：执行动画最后保留哪一个值

  • none：回到没有执行动画的位置

  • forwards：动画最后一帧的位置

  • backwards：动画第一帧的位置

• animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）
  
  
  

4_vertical-align

4.1_line boxes

官方文档的翻译：vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置

思考：一个div没有设置高度的时候，会不会有高度？

  没有内容，没有高度

  有内容，内容撑起来高度

但是内容撑起来高度的本质是什么呢？

  内容有行高（line-height），撑起来了div的高度

行高为什么可以撑起div的高度？

  这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level ； 而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

有文字、图片、块级矩形的元素在同一行，整体高度是以最高和最低高度撑起来，并且默认都是以基线对齐，即元素底部会有留白

4.2_baseline

结论：line-boxes一定会想办法包裹住当前行中所有的内容。

但，对齐方式千奇百怪

  你千奇百怪，其实有它的内在规律；

  答案就是baseline对齐

官方vertical-align的默认值：baseline

baseline介绍：

  文本的baseline是字母x的下方

  Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）

  Inline-block有文本时，baseline是最后一行文本的x的下方

4.3_vertical-align的其他值

现在，对于不同的取值就非常容易理解了

• baseline(默认值)：基线对齐（你得先明白什么是基线）

• top：把行内级盒子的顶部跟line boxes顶部对齐

• middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐【不能真正垂直居中！】

• bottom：把行内级盒子的底部跟line box底部对齐

• percentage：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样

• length：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

解决图片下边缘的间隙方法:

  方法一: vertical-align设置成top/middle/bottom

  方法二: 将图片设置为block元素

4.4_补充

文本与容器分离的现象，可能原因之一，文本的行高继承了祖先元素的行高