transform/translate - 变形

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。

  1. /* Keyword values */
  2. transform: none;
  4. /* Function values */
  5. transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
  6. transform: translate(12px, 50%);
  7. transform: translateX(2em);
  8. transform: translateY(3in);
  9. transform: scale(2, 0.5);
  10. transform: scaleX(2);
  11. transform: scaleY(0.5);
  12. transform: rotate(0.5turn);
  13. transform: skew(30deg, 20deg);
  14. transform: skewX(30deg);
  15. transform: skewY(1.07rad);
  16. transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
  17. transform: translate3d(12px, 50%, 3em);
  18. transform: translateZ(2px);
  19. transform: scale3d(2.5, 1.2, 0.3);
  20. transform: scaleZ(0.3);
  21. transform: rotate3d(1, 2.0, 3.0, 10deg);
  22. transform: rotateX(10deg);
  23. transform: rotateY(10deg);
  24. transform: rotateZ(10deg);
  25. transform: perspective(17px);
  27. /* Multiple function values */
  28. transform: translateX(10px) rotate(10deg) translateY(5px);
  30. /* Global values */
  31. transform: inherit;
  32. transform: initial;
  33. transform: unset;

旋转 - rotate

**
顺时针旋转，逆时针（负值）旋转
3D旋转，3D旋转可以分别绕X轴，Y轴，Z轴旋转。

  1. transform: rotate3d(1, 2.0, 3.0, 10deg);
  2. transform: rotateX(10deg);
  3. transform: rotateY(10deg);
  4. transform: rotateZ(10deg);

效果参照：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate3d())
image.png

缩放 - scale

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
负数旋转

  1. transform: scale(2, 0.5);
  2. transform: scaleX(2);
  3. transform: scaleY(0.5);

image.png
image.png

倾斜 - skew

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

  1. transform: skew(30deg, 20deg);
  2. transform: skewX(30deg);
  3. transform: skewY(1.07rad);

image.png

平移 - translate

  1. transform: translate(12px, 50%);
  2. transform: translateX(2em);
  3. transform: translateY(3in);

image.png

transform-origin

更改一个元素变形的原点 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）
image.png

  1. /* One-value syntax */
  2. transform-origin: 2px;
  3. transform-origin: bottom;
  5. /* x-offset | y-offset */
  6. transform-origin: 3cm 2px;
  8. /* x-offset-keyword | y-offset */
  9. transform-origin: left 2px;
  11. /* x-offset-keyword | y-offset-keyword */
  12. transform-origin: right top;
  14. /* y-offset-keyword | x-offset-keyword */
  15. transform-origin: top right;
  17. /* x-offset | y-offset | z-offset */
  18. transform-origin: 2px 30% 10px;
  20. /* x-offset-keyword | y-offset | z-offset */
  21. transform-origin: left 5px -3px;
  23. /* x-offset-keyword | y-offset-keyword | z-offset */
  24. transform-origin: right bottom 2cm;
  26. /* y-offset-keyword | x-offset-keyword | z-offset */
  27. transform-origin: bottom right 2cm;
  29. /* Global values */
  30. transform-origin: inherit;
  31. transform-origin: initial;
  32. transform-origin: unset;

transition - 过渡

SS 提供了四个属性来描述一个过渡：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay ``` .ball { width: 60px; height: 60px; border-radius: 100%; background: blue; transition: 1s; // ** }

.ball:hover { width: 120px; height: 120px; color: red; }

  1. **<br />不设置transition，小球的变化的突兀的瞬间的，不平滑<br />指定transition适用的属性，比如只适用于height，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现

transition: 1s height, 2s width; //也可以设置多个属性

transition: 1s 1s height, 2s width; //transition-delay延迟多久开始

transition: 1s 1s height linear; // transition-timing-function 渐变函数 linear匀速|ease-in加速|ease-out减速|cubic-bezier函数自定义速度模式

  2. transition的优点在于简单易用，但是它有几个很大的局限。<br />（1）**transition需要事件触发**，所以没法在网页加载时自动发生。<br />（2）**transition是一次性的**，不能重复发生，除非一再触发。<br />（3）**transition只能定义开始状态和结束状态**，不能定义中间状态，也就是说只有两个状态。<br />（4）**一条transition规则**，只能定义一个属性的变化，不能涉及多个属性。
  4. **CSS Animation就是为了解决这些问题而提出的。**
  5. <a name="Nwq8n"></a>
  6. # 
  7. <a name="kVtDs"></a>
  8. # animation - 动画
  9. `animation` 属性用来指定一组或多组动画，每组之间用逗号相隔。
  11. - name: none keyframes 的名称
  12. - duration：0s 完成动画所花费的时间，以秒或毫秒计。请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
  13. - timing-function：ease 动画的速度曲线。 ease ease-in ease-out linear ease-in-out
  14. - delay：0s 动画开始之前的延迟。
  15. - iteration-count：1 动画应该播放的次数。
  16. - direction:normal 是否应该轮流反向播放动画。
  18. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/248010/1612175446009-7c6a0822-bb7c-4361-a18e-6932eb78a08d.png#align=left&display=inline&height=202&margin=%5Bobject%20Object%5D&name=image.png&originHeight=404&originWidth=1416&size=155160&status=done&style=none&width=708)
  20. - [**animation-fill-mode**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode)**: **none. 动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
  22.  **none**：默认值，回到动画没开始时的状态<br />**forwards** 表示让动画停留在结束状态<br />**backwards**：让动画回到第一帧的状态。<br />**both**: 根据animation-direction轮流应用forwards和backwards规则。
  24. - [**animation-play-state**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-play-state)**:** running 动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。
  26.      如果想让动画保持突然终止时的状态，就要使用animation-play-state属性 paused

/ @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name / animation: 3s ease-in 1s 2 reverse both paused slidein;

/ @keyframes duration | timing-function | delay | name / animation: 3s linear 1s slidein;

/ @keyframes duration | name / animation: 3s slidein;

div:hover { animation: 1s 1s rainbow linear 3 forwards normal; }

div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; }

  1. keyframes关键字用来定义动画的各个状态，它的写法相当自由。<br />0%可以用from代表，100%可以用to代表

@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

  1. <a name="icWba"></a>
  2. # ![image.png](https://cdn.nlark.com/yuque/0/2021/png/248010/1612175877403-a939d7a4-3898-483b-97cc-d9f568e57fc8.png#align=left&display=inline&height=538&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1076&originWidth=1858&size=146017&status=done&style=none&width=929)
  4. <a name="15MRr"></a>
  5. ## 实现loading

  1. ```
  2. loading {
  3.   width: 100px;
  4.   height: 100px;
  5.   background: #ffcc00;
  6.   border-radius: 100%;   // *** 
  7.   border: 5px #851414 solid; // ***
  8.   border-right-color: #87ceeb; // ***
  9.   animation: loading 1s linear infinite;
  10. }
  11. @keyframes loading {
  12.   0% {
  13.     transform: rotate(0deg);
  14.   }
  15.   100% {
  16.     transform: rotate(360deg);
  17.   }
  18. }

实现摆钟

  1.  <div class="container">
  2.       <div class="line">
  3.         <div class="ball" />
  4.       </div>
  5.  </div>
  1. .container {
  2.   width: 100%;
  3. }
  4. .line {
  5.   width: 20px;
  6.   height: 400px;
  7.   background: red;
  8.   margin: 50px auto;
  9.   transform-origin: center top;
  10.   animation: swing 5s;
  11.   animation-iteration-count: infinite;
  12.   animation-timing-function: linear;
  13.   position: relative;
  14. }
  15. .ball {
  16.   width: 60px;
  17.   height: 60px;
  18.   border-radius: 100%;
  19.   background: blue;
  21.   position: absolute;
  22.   bottom: -60px;
  23.   left: -20px;
  24. }
  25. @keyframes swing {
  26.   0% {
  27.     transform: rotate(45deg);
  28.   }
  29.   25% {
  30.     transform: rotate(0deg);
  31.   }
  32.   50% {
  33.     transform: rotate(-45deg);
  34.   }
  35.   75% {
  36.     transform: rotate(0deg);
  37.   }
  38.   100% {
  39.     transform: rotate(45deg);
  40.   }
  41. }

**