由 transform 被占用引發的思考

作者：XboxYan 2022-11-07 19:08:28

transform并不是一個簡寫屬性，所以沒有辦法像background那樣對某一部分進行賦值。為了解決這個問題，從Chrome 104開始，瀏覽器終于正式支持單獨賦值了。

一、transform 很容易被占用

眾所周知，CSS 中的transform是一個包含很多值的屬性，例如：

div{
  transform: translate(-50%, -50%) scale(1.5)
}

但是，這并不是簡寫，而是就該這么寫，這一點和background不一樣。

div{
  background: url('1xxx') 10px 10px / 20px 20px no-repeat; 
}
/*等同于以下寫法*/
div{
  background-image: url('1xxx'); 
  background-position: 10px 10px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

分開寫的好處在于，如果只需要改變某一部分就很容易覆蓋。

div.div1{
  background-image: url('2xxx'); /*只改變圖片，不改變其他*/
}

回到前面，如果希望改變transform中的某一部分，就不太行了，必須把沒改變的部分也寫一遍，而且更改的部分也無法抽離出來作為一個公共的樣式。

div.scale{
  transform: scale(2) /*這樣不行，會丟失translate*/
}
/*必須寫完整*/
div.scale{
  transform: translate(-50%, -50%) scale(2)
}

那如何巧妙的解決這個問題呢？

二、目前的幾種思路

1. 用其他方式來代替 transform

碰到這種情況，第一感覺可能就是放棄原有transform屬性，用其他方式代替。

比如translate(-50%, -50%)一般是為了實現元素居中效果，可以用flex等其他方式實現。

.parent{
  display: flex
}
div{
  margin: auto; /*通過margin:auto實現居中*/
}

再比如translate(10px, 10px)這樣的偏移，可以用left或者margin-left等方式實現。

div{
  position: relative;
  left: 10px;
  top: 10px;
}

或者干脆再包裹一層父級，也能避免transform被占用的問題。

<div class="wrap">
  <div class="box">
    
  </div>
</div>

不過，這些方式都是規避方式，其實還有官方解決方案。

2. transform 的單獨賦值

前面提到過transform并不是一個簡寫屬性，所以沒有辦法像background那樣對某一部分進行賦值。為了解決這個問題，從Chrome 104開始，瀏覽器終于正式支持單獨賦值了。

有興趣的可以參考這篇文章：解放生產力！transform 支持單獨賦值改變[1]。

就拿前面那個例子來說：

div{
  transform: translate(-50%, -50%) scale(1.5)
}

可以寫成。

div{
  translate: -50% -50%;
  scale: 1.5
}

這樣如果需要改變某一部分，就只需要像普通屬性一樣覆蓋就行了。

div.scale{
  scale: 2
}

不過目前兼容性欠佳，謹慎使用！（適合內部項目嘗鮮）。

三、借助 CSS 變量拆分屬性

前面的transform 的單獨賦值雖然很好，但是太新了，無法立刻在項目中使用。下面介紹一個兼容性更好，使用更放心的解決方案。

還是上面這個例子：

div{
  transform: translate(-50%, -50%) scale(1.5)
}

通過 CSS 變量，將transform拆分；

div{
  --translate: -50%, -50%;
  --scale: 1.5;
  transform: translate(var(--translate)) scale(var(--scale))
}

經過這樣拆分以后，CSS 變量就成了獨立屬性，如果需要覆蓋，只需要修改其中一個就行了，而無需關注--translate是什么樣的，這樣變化的部分就可以單獨作為一個公共的樣式了，如下：

.div1{
  --translate: -50%, -50%;
}
.div1{
  --translate: 10px, 10px;
}
div.scale{
  --scale: 2; /*無需關注其他transform，可以作為公共的樣式*/
}

是不是非常清晰明了？下面是一個演示demo；

[type="checkbox"]:checked+div{
  --scale: 1.5
}

效果如下：

完整代碼可以查看以下任意鏈接：

CSS transform (codepen.io)[2]
CSS transform - 碼上掘金 (juejin.cn)[3]
CSS transform (runjs.work)[4]

四、借助 @property 實現過渡動畫

上面的實現看似完美，其實還是有問題的，比如加一個動畫。

由于拆分成了 CSS 變量寫法，所以動畫的變化對象也變成了 CSS 自定義屬性（--scale），如下：

div{
  /**/
  animation: scale 1s infinite linear alternate;
}
@keyframes scale {
  from {
    --scale:1
  }
  to {
    --scale:1.5
  }
}

實際效果是這樣的：

動是動了，但是沒有過渡，太生硬了，那如何解決呢？

這就需要用到@property[5]了，是干什么的呢？簡單來講，可以自定義屬性，讓自定義變量像顏色一樣進行過渡和動畫，換句話說，現在執行動畫的是--scale這個屬性，而不再是transform了。

所以，要實現過渡動畫，只需要將這個自定義屬性通過@property定義一下就行了，如下：

@property --scale { 
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

效果如下

和傳統實現效果一樣，但是代碼上更加優雅。

完整代碼可以查看以下任意鏈接：

CSS transform @property (codepen.io)[6]
CSS transform @property - 碼上掘金 (juejin.cn)[7]
CSS transform @property (runjs.work)[8]

五、不僅僅是 transform

下面來拓展一下，打開你的格局。

除了transform，還有很多其他復雜的 CSS 屬性，在現階段并沒有分開的情況下，這種通過 CSS 變量的方式就再適合不過了，比如filter。

el{
  filter: brightness(0.4) invert(75%) grayscale(50%);
}

通過 CSS 變量分離開來就是；

el{
  --brightness: 0.4;
  --invert: 75%;
  --grayscale: 50%;
  filter: brightness(0.4) invert(75%) grayscale(50%);
}

這樣在做一些圖片調整時，可以直接用單獨的變量控制了，比如像keynote這樣的。

再比如rgb顏色值，寫成一個變量不好控制，拆分成三個變量就容易多了。

el{
  --r: 255;
  --g: 255;
  --b: 255;
  color: rgb(var(--r), var(--g), var(--b));
}

這樣在做一些顏色調整交互時就非常方便，還是keynote中的例子。

還有一些可以無限疊加的屬性，比如background-image，對，又是這個，可謂是相當復雜了，在有多層背景，而且背景都是很長一段base64時，就成了這樣。

el{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E")
}

這樣一段 CSS 就像亂碼一樣，非常不利于閱讀，分不清哪個圖片是哪個，像這種情況就可以借助 CSS 變量改寫成如下形式。

:root{
  --背景1：url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E")；
  --背景2：url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E")；
 --背景3：url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'%3E%3C/path%3E %3C/svg%3E")；
}
el{
  background-image: var(--背景1), var(--背景2), var(--背景3)
}

這樣對于el來說，用到了哪些背景是不是一目了然呢？

六、總結一下

以上就是本文全部內容了，也是 CSS 變量的一些實戰小技巧，下面總結一下：

部分 CSS 屬性比較復雜，比如transform，很容易被占用
通常的解決方式是規避，比如換一種居中方式，或者用left、top等代替
新出現的transform 的單獨屬性可以解決這個問題，目前還比較新，僅適合內部項目嘗鮮
借助 CSS 變量可以拆分復雜的屬性
借助@property 讓CSS自定義屬性支持過渡動畫
不僅僅是transform，思維放開，復雜的屬性都可以采取這樣的思路

參考資料

[1]解放生產力！transform 支持單獨賦值改變: https://juejin.cn/post/7152331836578856967

[2]CSS transform (codepen.io): https://codepen.io/xboxyan/pen/BaVLMpv

[3]CSS transform - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7161704312681758755

[4]CSS transform (runjs.work): https://runjs.work/projects/4714accc300d441a

[5]@property: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property

[6]CSS transform @property (codepen.io): https://codepen.io/xboxyan/pen/OJERdpr

[7]CSS transform @property - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7161709269698478083

[8]CSS transform @property (runjs.work): https://runjs.work/projects/377a051b84d54bf6

責任編輯：武曉燕來源：前端偵探

transform 屬性瀏覽器