使用transform进行图形变换

概述

transform可以实现以下几种变换：

  • 位移（translate）
  • 缩放（scale）
  • 旋转（rotate）
  • 倾斜（skew）

位移（translate）

  1. .element {
  2.   /* 分开写 */
  3.   transform: translateX(20px);
  4.     transform: translateY(10px);
  5.   /* 合起来写 */
  6.   transform: translate(20px, 10px);
  7. }

缩放（scale）

  1. .element {
  2.   /* 分开写 */
  3.   transform: scaleX(2);
  4.     transform: scaleY(.5);
  5.   /* 合起来写 */
  6.   transform: scale(2, .5);
  7. }

旋转（rotate）

  1. .element {
  2.   transform: rotate(25deg);
  3. }
  4. .rotateXItem{
  5.   transform: rotateX(50deg);
  6. }
  7. .rotateYItem{
  8.   transform: rotateY(70deg);
  9. }
  10. .rotateZItem{
  11.   transform: rotateZ(100deg);
  12. }
  • 效果图：

image.pngimage.png

一般用于360度旋转制作loading

倾斜（skew）

  1. .element {
  2.   transform: skewX(20deg);
  3. }

image.png

inline 元素不支持 transform，需要先变成 block

使用transition进行动画过渡

作用

  • 补充中间帧

语法

  1. .example {
  2.   /* 属性过渡 */
  3.   transition: [属性名] [时长] [过渡方式] [延迟];
  4.   /* 同时进行两个属性过渡 */
  5.   transition: [属性名1] [时长1] [过渡方式1] [延迟1], [属性名2] [时长2] [过渡方式2] [延迟2];
  6. }

过渡方式

并不是所有属性都能过渡

  • display: none —> display: block 不能过渡
  • visibility: hidden —> visibility: visible 可以过渡
  • background（?）
  • opacity（?）

使用animation进行动画过渡

语法

  1. /* keyframes语法1：使用from和to */
  2. @keyframes animation-name-1{
  3.   from {
  4.     transform: translateX(0%);
  5.   }
  6.   to {
  7.     transform: translateY(100%);
  8.   }
  9. }
  11. /* keyframes语法2：使用百分数 */
  12. @keyframes animation-name-2{
  13.   0% {
  14.     transform: translateX(10px);
  15.   }
  16.   50% {
  17.     transform: translateX(50px);
  18.   }
  19.   100% {
  20.     transform: translateY(100px);
  21.   }
  22. }
  24. /* animation语法 */
  25. .someElement {
  26.     /* 不相关代码 */
  27.   animation: [动画名] [时长] [过渡方式] [延迟] [次数] [方向] [填充模式] [是否暂停]; 
  28.   /* 不相关代码 */
  29. }
  31. /* 举个例子 */
  32. .someElement {
  33.     /* 不相关代码 */
  34.   animation: animation-name-1 5s infinite; 
  35.   /* 不相关代码 */
  36. }

animation属性值

  • 时长：1s / 1000ms
  • 过渡方式：linear等（与transition取值相同）
  • 次数：3 / infinite
  • 方向：reverse / alternate / alternate-reverse
  • 填充模式：none / forwards / backwards / both
  • 是否暂停：paused / running

部分资料来源：饥人谷 - 方方老师