css -- transform 形變 · 前端知識 -- 學習整理

[TOC] >[success] # transform CSS **transform**屬性允許對某一個元素進行某些形變, 包括**旋轉，縮放，傾斜或平移**等，其中**行內級元素不能進行形變** >[danger] ##### 使用 * 提供了一些css 函數來進行使用 * 平移：**translate(x, y)** * 縮放：**scale(x, y)** * 旋轉：**rotate(deg)** * 傾斜：**skew(deg, deg)** ![](https://img.kancloud.cn/da/98/da98ae6e205d99b83b17bb56f343a646_750x256.png) >[info] ## 具體函數說明 * **transform** 可以設置多個函數組合用空格隔開，舉個例子 ~~~ transform: translate(-50%,-50%) scale(0.5) rotate(45deg); ~~~ >[danger] ##### translate(x, y) -- 平移函數中只有一個值時設置**x**軸上的位移，第二個值時設置**x軸和y軸**上的位移 * 可以使用 translate 做塊的**水平和垂直居中**，設思想如圖，為什么不能設置margin-top:50% 原因是因為margin-top 百分比相對于寬度并不是高度 ![](https://img.kancloud.cn/ff/db/ffdb777eef3dd4f67bc5a714df059b0e_614x229.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { border: 5px solid #f00; height: 200px; width: 200px; position: relative; } .container .box { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: orange; } </style> </head> <body> <div class="container"> <div class="box">123</div> </div> </body> </html> ~~~ >[danger] ##### scale - 縮放 * 一個值時，設置x軸上的縮放,二個值時，設置x軸和y軸上的縮放,其中大于1時為放大，小于1時為縮小 ~~~ transform: scale(2,2); // x y 軸放大兩倍 ~~~ >[danger] ##### rotate -- 旋轉 * 可以對元素進行旋轉，默認以元素中心為旋轉點，正值為順時針，負值為逆時針； ~~~ transform:rotate(45deg); // 解釋：單位是 deg 度數，即為45°意思 ~~~ >[danger] ##### transform-origin -- 形變的原點設置一個值時候是設置x軸的原點，設置兩個值時候是分別x，y軸原點，參數可以是`left, center, right, top, bottom`其中之一關鍵字，也可以是百分比或者數值(從左上角開始計算) ~~~ div{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，然后進行順時旋轉45度 */ div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改變元素原點到x 為10 y 為10，然后進行順時旋轉45度 */ ~~~ >[danger] ##### skew -- 傾斜函數定義了一個元素在二維平面上的傾斜轉換，其中一個值時候表示x軸上的傾斜，兩個值時候表示x軸和y軸上的傾斜，正數表示順時針，負數表示逆時針 ~~~ transform:skew(30deg,0deg); ~~~ ![](https://img.kancloud.cn/3c/b4/3cb4ea23aaa9bb43a83cd002e3deff96_263x157.png)