
- CSS 教程
- CSS - 首頁
- CSS - 路線圖
- CSS - 簡介
- CSS - 語法
- CSS - 選擇器
- CSS - 包含
- CSS - 測量單位
- CSS - 顏色
- CSS - 背景
- CSS - 字型
- CSS - 文字
- CSS - 圖片
- CSS - 連結
- CSS - 表格
- CSS - 邊框
- CSS - 塊級邊框
- CSS - 行內邊框
- CSS - 外邊距
- CSS - 列表
- CSS - 內邊距
- CSS - 游標
- CSS - 輪廓
- CSS - 尺寸
- CSS - 捲軸
- CSS - 行內塊
- CSS - 下拉選單
- CSS - 可見性
- CSS - 溢位
- CSS - Clearfix
- CSS - 浮動
- CSS - 箭頭
- CSS - 調整大小
- CSS - 引號
- CSS - 順序
- CSS - 位置
- CSS - 連字元
- CSS - 懸停
- CSS - 顯示
- CSS - 焦點
- CSS - 縮放
- CSS - 平移
- CSS - 高度
- CSS - 連字元字元
- CSS - 寬度
- CSS - 不透明度
- CSS - Z-Index
- CSS - 底部
- CSS - 導航欄
- CSS - 疊加層
- CSS - 表單
- CSS - 對齊
- CSS - 圖示
- CSS - 圖片庫
- CSS - 註釋
- CSS - 載入器
- CSS - 屬性選擇器
- CSS - 組合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 計數器
- CSS - 剪裁
- CSS - 書寫模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - 全部
- CSS - 內嵌
- CSS - 隔離
- CSS - 滾動溢位
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - 指標事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大塊級尺寸
- CSS - 最小塊級尺寸
- CSS - 混合模式
- CSS - 最大內聯尺寸
- CSS - 最小內聯尺寸
- CSS - 偏移
- CSS - 強調色
- CSS - 使用者選擇
- CSS 高階
- CSS - 網格
- CSS - 網格佈局
- CSS - Flexbox
- CSS - 可見性
- CSS - 定位
- CSS - 層
- CSS - 偽類
- CSS - 偽元素
- CSS - @規則
- CSS - 文字效果
- CSS - 分頁媒體
- CSS - 列印
- CSS - 佈局
- CSS - 驗證
- CSS - 圖片精靈
- CSS - !important
- CSS - 資料型別
- CSS3 教程
- CSS3 - 教程
- CSS - 圓角
- CSS - 邊框圖片
- CSS - 多背景
- CSS - 顏色
- CSS - 漸變
- CSS - 盒陰影
- CSS - 盒裝飾中斷
- CSS - 游標顏色
- CSS - 文字陰影
- CSS - 文字
- CSS - 2D 變換
- CSS - 3D 變換
- CSS - 過渡
- CSS - 動畫
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按鈕
- CSS - 分頁
- CSS - 變數
- CSS - 媒體查詢
- CSS - 函式
- CSS - 數學函式
- CSS - 遮罩
- CSS - 形狀
- CSS - 樣式圖片
- CSS - 特效性
- CSS - 自定義屬性
- CSS 響應式
- CSS RWD - 簡介
- CSS RWD - 視口
- CSS RWD - 網格檢視
- CSS RWD - 媒體查詢
- CSS RWD - 圖片
- CSS RWD - 影片
- CSS RWD - 框架
- CSS 工具
- CSS - PX到EM轉換器
- CSS - 顏色選擇器和動畫
- CSS 資源
- CSS - 有用資源
- CSS - 討論
CSS - scale()
CSS 中的 scale() 函式用於在二維平面上對元素應用縮放變換(調整大小)。該函式可以以不同的比例水平和垂直調整元素的大小,因為縮放量由向量 [sx, sy] 定義。結果是 <transform-function> 資料型別。
縮放變換由一個二維向量確定,其座標指定每個方向上的縮放或調整大小的程度。
當兩個座標相等時,縮放將是均勻的(各向同性的),並且元素的縱橫比將保持不變。這種形式的縮放變換稱為相似變換。
如果座標值超出 [-1, 1] 範圍,則元素將在指定的維度上增長。
如果座標值在 [-1, 1] 範圍內,則元素將在指定的維度上縮小。
如果座標值為負,則會導致在指定維度上發生點反射。
當值為 1 時,它對元素的大小沒有影響。
使用 scale() 函式只能在二維平面上進行縮放。為了在三維平面上實現縮放,需要使用 scale3d() 函式。
可能的值
scale() 函式可以接受一個或兩個值作為引數,表示每個方向上要應用的縮放量。
sx:這是一個 <number> 或 <percentage> 值,表示縮放向量的橫座標(水平,x 座標)。
sy:這是一個 <number> 或 <percentage> 值,表示縮放向量的縱座標(垂直,y 座標)。當未為 sy 指定值時,它預設為 sx 的值,這會導致均勻縮放,從而保持元素的縱橫比。
語法
transform: scale(sx) | scale(sx, sy);
無障礙性問題:網站上動畫的調整大小或縮放對於使用者介面來說是一個棘手的問題。因此,如果您想在網頁上包含動畫縮放,則應為使用者提供一個控制元件,以便他們可以關閉動畫。
CSS scale() - 同時縮放 X 和 Y 維度
以下是一個同時在 scale() 函式中傳遞 X 和 Y 維度的示例,其中 scale(0.6) 等效於 scaleX(0.6) scaleY(0.6)
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scale-single-value { background-color: pink; } #xy:hover { transform: scale(0.6); } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>scale(0.6)</p> <div id="xy" class="scale-single-value"></div> </section> </body> </html>
CSS scale() - 分別縮放 X 和 Y 維度
在下面的示例中,X 和 Y 維度分別傳遞,其中 scale(0.5, 0.8) 等效於 scaleX(0.5) scaleY(0.8),並且 transform-origin 設定為 right
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scale-double-value { background-color: lightgreen; } #x-y:hover { transform: scale(0.5, 0.8); transform-origin: right; } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>scale(0.5, 0.8)</p> <div id="x-y" class="scale-double-value"></div> </section> </body> </html>