Css transform有新的灵活写法了导语 CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

导语

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。几乎所有的浏览器都支持。应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘.如果要覆盖，只能在写一遍，不能单独的覆盖。

若理解有误，欢迎留言指正，谢谢

但，只能转换由盒模型定位的元素

简单介绍

旋转

#2D 
transform: rotate(0.5turn); 

#3D
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

缩放

#设定比 1 大的数值使该元素变大
#设定比 1 小的数值使该元素变小
transform: scale(2, 0.5);
//等效
transform: scaleX(2);
transform: scaleY(0.5);

transform: scale3d(2, 0.5,1);
//等效
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(1);

倾斜

transform: skew(30deg, 20deg);
//等效
transform: skewX(30deg);
transform: skewY(20deg);

平移

transform: translate(120px, 100px);
//等效
transform: translateX(120px);
transform: translateY(100px);

transform: translate3d(120px, 100px,10px);
//等效
transform: translateX(120px);
transform: translateY(100px);
transform: translateZ(10px);

transform 目前写法

.mdButton {
  transform: translateX(10%) rotate(30deg) scale(1.2);
}

.mdButton:hover {
  transform: translateX(50%) rotate(40deg) scale(2);
}

transform 新的写法

执行顺序，依旧是translate, rotate, scale 。跟书写顺序无关。不过针对浏览器的版本有要求, Chrome 104, Firefox 72, or Safari 14.1

.mdButton {
    translate: 10% 0;
    rotate: 30deg;
    scale: 1.2;
}

.mdButton {
    translate: 50% 0;
    rotate: 40deg;
    scale: 2;
}

动画写法有如何变化呢？

每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式.

注意事项：

如果一个关键帧@keyframes,没有指定动画的开始或结束状态（也就是，0%/from 和100%/to），浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态
如果@keyframes的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及
如果有多个@keyframes使用同一个名称，以最后一次定义的为准。
如果一个@keyframes中没有出现的属性，那么这个属性将使用插值
如果一个@keyframes出现了重复的定义，且重复的CSS 属性值，则以最后一次定义的属性为准

之前的写法

@keyframes main {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.mdButton {
  animation: main 2s;
  animation-fill-mode: forwards;
}

新的写法

把之前的变换函数，替换为：间隔的属性值调用不同的方法；1个属性，设置维度x上；2个属性值，设置x,y;3个属性值，设置x,y,z

写法一

聚合在一起

@keyframes main {
    0% { translate: 0% 0; }
    100% { translate: 100% 0; }
  
    0%, 100% { scale: 1; }
    5%, 95% { scale: 1.2; }
  
    0% { rotate: 0deg; }
    10%, 90% { rotate: 180deg; }
    100% { rotate: 360deg; }
  }
  
  .mdButton {
    animation: main 2s;
    animation-fill-mode: forwards;
  }

写法二

分组写

@keyframes move {
    0% { translate: 0% 0; }
    100% { translate: 100% 0; }
  }
  
  @keyframes scale {
    0%, 100% { scale: 1; }
    5%, 95% { scale: 1.2; }
  }
  
  @keyframes rotate {
    0% { rotate: 0deg; }
    10%, 90% { rotate: 180deg; }
    100% { rotate: 360deg; }
  }
  
  .mdButton {
    animation: move 2s, scale 2s, rotate 2s;
    animation-fill-mode: forwards;
  }

参考

#transform

#@keyframes