css: transform(2d, 3d转换) 与 transition(过度), Animation(一次性全弄懂)

之前学 css 动画的时候, 就一知半解的, 总是傻傻分不清楚, transform 和 transition, 世上无难事, 只怕有心人,所以我决定要好好看看 transform 和 transition, 那也就顺带手看看Animation吧, 一次性干完!!!

注意: 本文章只记录一些重点

个人理解

transform: 相当于我们告诉浏览器我们要的最终结果, 例如 transform:scaleX(300px); 即使告诉浏览器我们要的变化最终结果是, x 轴 右平移 300px
transition: 是告诉浏览器我们的动画要怎么持续, 多长时间, 来来达到最终的我们制定的目标动画

细细一品, 感觉一个 Animation(customAnimation) 可以是由一个或者好多个 transform 去组成, 而transition 指定了 Animation(customAnimation)这个动画如何完成, 和完成的速率(先快后慢 ,匀速, 先慢后快,或者自定义)

transform 属性

重点:

1. skew 倾斜

可以给指定的元素产生倾斜效果, 可以指定角度

div {
	transform:skew(45deg)
}

2. scale 放大缩小

可以给指定的元素产生放大缩小的效果

div {
	transform:scale(2) // 扩大到原来的 2 倍
}

3. translate2d转换移动

可以给指定的元素产生2d 方向上的移动效果, 可以移动距离

div {
	transform:translate(300px,300px) // 往右 往上,各个平移 300px
}

4. rotate2d旋转 (xy 轴相交的平面)

可以给指定的元素产生2d 方向上的转换, 可以转动元素

div {
	transform:rotate(45deg) // 2d 平面转换, 顺时针 45deg 旋转
}

4. rotate3d /rotateX/ rotateY/rotateZ 3d旋转( x, y ,z )

可以给指定的元素产生3d 方向上的转换, 可以转动元素

div {
	transform:rotate3d(x, y, z, 45deg) // 3d转换
}
// 特指 x y z 轴上的值矢量, 哪个矢量值越大,哪个方向转的的也越夸张

注意:

1. transform 属性中, 如果有同名属性则是覆盖 而不是合并

例子:

main  {
	transform: translate(300px, 400px);
}

main:hover {
	transform:  rotateX(45deg);

}

在上面的例子中, 带有 hover的 main 标签在做第下面的变换的时候, 并不会把上面的 translate(300px , 400px) 给带上, 而是直接覆盖

2. transform 中的 值定义的先后有区别

div {
	transform: rotateY(45deg) rotateX(45deg);
}

与

div {
	transform: rotateX(45deg) rotateY(45deg);
}

这两个有先后顺序不一样的区别, 因此他们的效果也是不一样的

3. transform 属性对 inline级别(inline-block除外)的元素无效

CSS Transforms Module Level 1 - Terminology - Transformable Element
A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption
• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

从翻译可以看出来, css transform 属性只有在 box model 或者 block-levelor atomic inline-level 才有效果

什么是 atomic inline-level??

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. (https://www.w3.org/TR/CSS2/visuren.html#x13)

结论:

• display: block: 让一个元素生成一个lock box
• display: inline-block: 生成一个inline-level block container，元素本身被格式化为atomic inline-level box，它的内部被格式化为block box
  所以 这些是可以被 transform 去修饰的

transition 属性

重点

1. transition-property

如果不添加该属性在 css 中, 则默认是transition-property:all, 然后当我们需要确定自己动哪些属性是有过度属性. 哪些是直接转换,不需要过度的话, 那么我可以使用transition-property 这个属性

2.