关于html:CSS-transformtransitionanimation-指南

transform

变换~ 简单的变换参数。

坐标系

1.1 在CSS中，笛卡尔坐标系应用三个轴示意（如下图）：

• x轴（横轴）
• y轴（纵轴）
• z轴（深度轴）

每个元素都有本人的参照物，各轴都绝对本身而动。

2D变形只须要关注x轴和y轴;3D要加上 z轴

x轴的正值在右侧，负值在左侧。
y轴的正值纵轴向下，负值纵轴向上。
z轴从显示器上跃出，指向你的眼前。z轴上的正值离你较近，负值离你较远。
1.2 旋转
如果旋转了元素，轴也随之旋转。旋转之后再变形，是绝对旋转后的轴计算
CSS变形性能中应用的另一个坐标系——球坐标系

罕用

平移

• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()

缩放

• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()

旋转

• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()

rotate3d(x,y,z,deg)
应用 rotate(45deg)用3D旋转示意是 rotate3d(0,0,1,45deg)
应用rotate3d()。前三个值指定3D空间中向量x,y和z的向量，第四个值是角度值，指上图中rotate(45deg)在3D空间中，等价于rotate3d(0,0,1,45deg)。前三个数设定向量的三个重量，这个向量在x轴和y轴上的大小为0。在z轴上的大小为1。因而，这个向量在z轴上，指向正方向，即指向观察者。如果看向量的原点，元素是顺时针旋转。

如果说旋转函数是rotate3d(-0.95,0.5,1,45deg)形容的向量。假如有个边长200像素的立方体，那么这个向量在x轴上的大小为190像素，指向左方。在y轴上的大小为100像素，指向下方。在z轴上的大小为200像素，指向观察者。这个向量从原点(0,0,0)指向(-190px,100px,200px)。如下图：

ps:rotate3d(1,1,0,45deg)与 rotateX(45deg) rotateY(45deg) rotateZ(0deg)不等效。

歪斜

• skew()
• skewX()
• skewY()

透视点

在3D空间中扭转元素的状态时，基本上都要赋予元素肯定的视域。视域为元素赋予前后深度，而这深度能够依据须要设定。能够了解成镜头的焦距
越大示意越远，越小示意越近；近大远小；
有3D成果须要配置合应用

• perspective()

500px到1000px之前的值产生“适中的视域”。下图展现了雷同旋转角度下不同视域值得到的后果。

必须是负数，而且不能为零。其余值都将导致 perspective()函数被疏忽。肯定要把 perspective()函数放在首位，只有也要放在以来视域的变形之前。

perspective 属性与perspective()函数的区别

• perspective()函数只为指标元素定义视域，比方申明perspective(800px) rotateY(45deg)。那么只有利用这个规定的元素能力应用设定的视域。
• perspective 属性定义的视域深度利用到指标元素的所有子元素上。

其余

挪动原点

• transform-origin

目前所见的变形有个共同点，都以元素的相对核心为变形的原点。
第一个值针对横向，第二个值针对纵向，可选的第三个值是z轴上的长度。

变形形式

• transform-style

设置元素的子元素是位于 3D 空间中还是立体中。

.outer {      transform: perspective(750px) translateY(60px) rotateX(-20deg);     transform-style: perserve-3d;}.inner {      transform: perspective(750px) translateZ(60px) rotateX(45deg); }<div class="outer">    <div class="inner">inner</div></div>

ps:transform-style设定的变形形式可能会被其余属性笼罩,导致有效perserve-3d

• overflow: visible
• filter: none
• clip: auto
• clip-path: none
• mask-image: none
• mask-border-source: none
• mix-blend-mode: normal

解决反面

在3D变形中，backface-visibility属性能够看到元素的反面。

.card {position: relative;perspective: 800px;transform-style: preserve-3d;width:200px;height:280px;transition: all .6s;border: 1px solid #000;border-radius: 4px;}.card:hover {transform: rotateY(180deg);}img {position: absolute;width:100%;height: 100%;transition: all .5s;backface-visibility: hidden;}/*因为咱们将两个图像都藏在了反面，所以另一面没有任何货色。 所以接下来须要再把.front-face翻转180度*/.back-face {transform: rotateY(180deg);}<div class="card">    <img class="front-face" src="1.jpg">    <img class="back-face" src="2.jpg"></div>

留神

1. 范畴框：计算范畴框时，轮廓和外边距不算在内
2. 变形的元素有本人的重叠上下文：变形前小或大，元素在页面上所占的空间与变形前放弃不变。对所有变形函数都成立
3. 示意一个或多个变形函数：两头以空格分隔。如：transform: rotate(30deg) skewX(-25deg) scaleY(2);
4. 变换程序：从最右边第一个开始，始终到最初一个
5. 正确设置值：有多个变形函数时，每个都要设置正确，要确保全副无效。如果有一个函数是有效的，整个值都将生效。
6. 变形叠加：变形通常不叠加。如果扭转了元素的状态，而后再想增加一种变形，那么要在原变形根底上批改。
7. 变形当初还不能利用到基元行内框上。基元行内框指span，超链接等行内框。这些元素能够随着块级父元素一起变形，然而不能间接旋转。除非把它们的显示方式改为display:block，display:inline-block等。

8. 有3D成果须要配合**perspective**应用

   transition：property duration timing-function delay

   过渡~ 属性，触发动作，一过性。

transition-property: width, heitht, color ;trnasition-duration: 1s, 1.5s, 2s ;transition-timing-function: ease, linear, ease-in-out ;transition-delay: 0s, 1s, 0s ;transition: width 1s ease ,heitht 1.5s linear 1s, color 2s ease-in-out ;

transition-property:none|all|_property_

规定设置过渡成果的 CSS 属性的名称。

反对过渡动画属性

transition-duration:_time_

规定实现过渡成果须要多少秒或毫秒。

transition-timing-function

规定速度成果的速度曲线。

transition-delay

定义过渡成果何时开始。

留神

1. 须要事件触发，所以没法在网页加载时主动产生
2. 是一次性的，不能反复产生，除非一再触发
3. 只能定义开始状态和完结状态，不能定义中间状态，也就是说只有两个状态
4. 一条transition规定，只能定义一个属性的变动，不能波及多个属性。

animation:_name_ duration _timing-function_ delay _iteration-count_ direction

动画~关键帧，往返性

  <style>    .box {      height: 100px;      width: 100px;      border: 15px solid black;      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;    }    .box:hover {      animation-play-state: paused;    }    @keyframes changebox {      10% {        background: red;      }      50% {        width: 80px;      }      70% {        border: 15px solid yellow;      }      100% {        width: 180px;        height: 180px;      }    }  </style><div class="box"></div>

animation-name:_keyframename_|none;

animation-duration:time

animation-timing-function:_value_

animation-timing-function 应用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您可能在该函数中应用本人的值，也能够预约义的值：

animation-delay:time

animation-iteration-count: _n_|infinite;

animation-direction: normal|alternate;

参考

1. https://juejin.cn/post/6844903874579578887#heading-17
2. https://jelly.jd.com/article/6006b1025b6c6a01506c8775
3. https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
4. https://www.w3school.com.cn/cssref/pr_transition.asp