CSS中旋轉(zhuǎn)屬性可以用來讓元素以指定的角度進(jìn)行旋轉(zhuǎn)展示。然而，在元素旋轉(zhuǎn)后，觸摸事件方向可能會(huì)出現(xiàn)偏差，需要進(jìn)行調(diào)整。下面我們來一起探究CSS旋轉(zhuǎn)后Touch方向的問題。

transform:rotate(30deg);

上述代碼將元素順時(shí)針旋轉(zhuǎn)30度。在這種情況下，元素看起來是旋轉(zhuǎn)了，但是當(dāng)我們點(diǎn)擊元素觸發(fā)touch事件時(shí)，事件的方向不符合實(shí)際點(diǎn)擊的位置。這是因?yàn)椋氐男D(zhuǎn)并沒有影響其本身坐標(biāo)系統(tǒng)，使得觸摸事件的方向無法應(yīng)用旋轉(zhuǎn)矩陣的變換。

為了解決這個(gè)問題，我們需要在touch事件中進(jìn)行想要的方向轉(zhuǎn)換。下面是一段可以實(shí)現(xiàn)逆時(shí)針轉(zhuǎn)90度的代碼：

transform-origin: 50% 50%;
transform: rotate(-90deg) translateY(-100%);

以上兩行代碼將元素以其中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行逆時(shí)針旋轉(zhuǎn)90度，并通過translateY(-100%)將元素向上移動(dòng)一個(gè)自身高度的距離。這樣，我們就可以完美適配旋轉(zhuǎn)之后的touch事件方向。