[Day 03][譯文] 如何在 Span 上使用 CSS3 Transform？ - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試 30 天 (跳過假日 ლ(́◕◞౪◟◕‵ლ) ) 不間斷更新文章的 Day 3

在企圖將 <span> 嵌套在 <p> 內想做點特定的字樣式時，我發現到 transform 失去了用處沒有任何反應！於是上網查了一下發現也有許多人遇到此問題，以下會翻譯所找到的解決方法與附上原貼文的連結，做一個紀錄。

說明 - Explanation

A <span> or a link (<a>) are inline elements and the transform property doesn't apply to inline elements.

<span> 或是 <a> 元素都是屬於內聯 (inline) 元素，而 Transform 屬性並不適用於 Inline 元素 。

Here is the list of transformable elements from the CSS Transforms Module Level 1.

這裡有 the CSS Transforms Module Level 1 內所列出可進行轉換的元素列表。

解決方案 - Solution

Set the display property of the span to inline-block or block. This will let you apply transforms to the span element.

將 span 的 display 屬性設置為 inline-block 或 block。這將使您可以將 transforms 屬性應用到 span 元素。

It also works for other inline elements like <a> <em> <strong>... (see the list of inline elements on MDN).

這個方法也適用於其他內聯 (inline) 元素，像是 <a> <em> <strong> ... 等 (請參考 MDN 上的內聯元素列表)

e.g. (lang: Sass)

span
  display: inline-block /* <- ADD this */

📚 原文連結 - Source Post Link

How can I use CSS3 transform on a span? - Stack Overflow

https://stackoverflow.com/questions/24961795/how-can-i-use-css3-transform-on-a-span