深入理解CSS變形transform(2d)

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/04/04/5350254.html
-Advertisement-
Play Games

× 目錄 [1]變形原點 [2]變形函數 [3]多值 前面的話 CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更複雜的效果。變形transform可以實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形 ...


×
目錄
[1]變形原點 [2]變形函數 [3]多值

前面的話

 　　CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更複雜的效果。變形transform可以實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形函數和transform-origin變形原點。本文將詳細介紹變形transform2d的相關知識。為了更清楚地說明變形的整個過程，本文的DEMO中大量使用了CSS過渡transition。關於CSS過渡transition的詳細情況移步至此

 

變形原點(2維)

　　變形原點transform-origin是指變形操作所依據的基點。預設情況下，變形原點位於元素的中心點。

transform-origin

　　值: x軸 y軸 z軸

　　初始值: 50% 50%

　　應用於: 非inline元素(包括block、inline-block、table、table-cell等)

　　繼承性: 無

　　[註意]IE9-瀏覽器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加首碼，其他更高版本瀏覽器可使用標準寫法

　　2維的變形原點transform-origin是由x軸和y軸兩個軸的值共同確定的(不考慮3維的情況，z軸的值預設為0)

x軸: left | center | right | <length> | <percentage>
y軸: top | center | bottom | <length> | <percentage>

【1】關鍵字

x軸
left: 0%  center: 50%  right: 100%
y軸
top: 0%  center: 50%  bottom: 100%
//以rotate()旋轉函數來說明變形原點。rotate(90deg)表示元素沿順時針旋轉90角度

【2】數值

　　x軸數值表示在x軸上離0點(元素邊框外側左上角)的偏移量；y軸數值表示在y軸上離0點的偏移量

//以rotate()旋轉函數來說明變形原點。rotate(90deg)表示元素沿順時針旋轉90角度

【3】百分比

　　其中x軸的百分比相對於元素的寬度和(width+橫向padding+橫向border)，而y軸的百分比相對於元素的高度和(height+縱向padding+縱向border)

//以rotate()旋轉函數來說明變形原點。rotate(90deg)表示元素沿順時針旋轉90角度

【4】單個值

　　當只有一個值時，預設第二個值為center

//以rotate()旋轉函數來說明變形原點。rotate(90deg)表示元素沿順時針旋轉90角度

 

變形函數(2維)

　　變形transform是一系列變形函數的集合

transform

　　值: none | <transform-function>+

　　初始值: none

　　應用於: 非inline元素(包括block、inline-block、table、table-cell等)

　　繼承性: 無

<transform-function>: translate | scale | rotate | skew | matrix

　　[註意]transform中出現多個變形函數時用空格分隔

　　[註意]位移、縮放、旋轉和傾斜這四個操作中除了位移與變形原點無關，其餘三個都與變形原點有關

矩陣matrix

　　實際上，位移、縮放、旋轉和傾斜這四個操作都是通過矩陣matrix實現的。

　　matrix(a,b,c,d,e,f)函數有a,b,c,d,e,f這6個參數。而x和y是變形前元素的任意點。通過以下矩陣變換，生成對應的新坐標x'和y'。

x' = ax + cy + e;
y' = bx + dy + f;

　　由此可得到預設a、d為1，b、c、e、f為0。a和d控制縮放，且不可為0；c和b控制傾斜；而e和f控制位移

位移

　　translate位移函數可以使元素從原來的位置上移動指定的位移。涉及位移的2d函數共3種，分別是translate()、translateX()、translateY()

　　[註意]元素髮生位移後，元素的x軸和y軸跟著也一變移動，若元素再進行其他的變形操作，則要沿著改變後的x軸和y軸進行變形

translate(x[,y]?)

　　x表示元素在x軸方向上的位移；y表示元素在y軸方向上的位移

　　[註意]當y不存在時，相當於y=0;

translateX(x) 相當於 translate(x,0)

　　x表示元素在x軸方向上的位移

translateY(y) 相當於 translate(0,y)

　　y表示元素在y軸方向上的位移

　　[註意]位移函數相當於matrix(1,0,0,1,x,y)

　　位移函數還可以接受百分比。其中x%相對於元素水平方向的寬度和，y%相對於元素垂直方向的高度和

　　[註意]IE10瀏覽器有bug，元素的位移函數的百分比是相對於元素的可視寬高(不包括邊框)而言的

//元素的主要樣式為width:100px;height:100px;padding:10px;border:10px solid black;

縮放

　　scale縮放函數可以讓元素根據變形原點進行縮放，預設縮放值為1。涉及縮放的2d函數共3種，分別是scale()、scaleX()、scaleY()

　　[註意]當元素被縮放後，若元素要進行位移，數值類型的位移值要乘以該縮放比例；百分比類型的位移值乘以原來的寬度和或高度和轉換成數值類型後，再乘以縮放比例

scale(x,[,y]?)

　　x表示元素在x軸方向上的縮放比例；y表示元素在y軸方向上的縮放比例

　　[註意]當y不存在時，相當於y=x

　　[註意]當x或y的值為負值時，元素先翻轉再縮放

scaleX(x) 相當於 scale(x,1)

　　x表示元素在x軸方向上的縮放比例

scaleY(y) 相當於 scale(1,y)

　　y表示元素在y軸方向上的縮放比例

　　[註意]縮放函數相當於matrix(x,0,0,y,0,0)

傾斜

　　skew傾斜函數可以讓元素以其變形原點圍繞x軸和y軸進行一定角度的傾斜。涉及傾斜的2d函數共3種，分別是skew()、skewX()、skewY()

　　[註意]元素傾斜後，x軸和y軸發生傾斜，若元素要進行其他變形操作，則沿著傾斜後的x軸和y軸進行變形

skew(xdeg,[,ydeg]?)

　　x表示y軸向x軸傾斜的角度，y表示x軸向y軸傾斜的角度

　　[註意]當y不存在時，相當於y=0

　　[註意]x>0時，表示y軸向x軸正方向傾斜；x<0時，表示y軸向x軸負方向傾斜

　　[註意]y>0時，表示x軸向y軸正方向傾斜；y<0時，表示x軸向y軸負方向傾斜

skewX(x) 相當於 skew(x,0)

　　x表示y軸向x軸傾斜的角度

skewY(y) 相當於 skew(0,y)

　　y表示x軸向y軸傾斜的角度

　　[註意]傾斜函數相當於matrix(1,tany,tanx,1,0,0)

旋轉

　　rotate旋轉函數可以讓元素通過指定的角度(deg)根據變形原點進行順時針旋轉，預設為0deg。與skew不同的是，rotate不會改變元素的形狀。涉及到旋轉的2d函數只有一個，就是rotate()

　　[註意]元素旋轉後，元素的x軸和y軸也跟著發生旋轉。若元素要進行其他變形操作，則沿著旋轉後的x軸和y軸進行變形

rotate(Ndeg)

　　[註意]當N為正數時，元素進行順時針旋轉；當N為負數時，元素進行逆時針旋轉

　　[註意]旋轉函數相當於matrix(cosN,sinN,-sinN,cosN,0,0)

 

多值

　　transform變形可以接受多值，出現多個變形函數時用空格分隔，並且按照從前往後的順序執行。

transform: <transform-function1> <transform-function2> <transform-function3>...

【1】多個變形函數的先後關係可以轉換為多個元素的嵌套關係

<div style="transform:rotate(45deg) translateX(100px)"></div>
相當於
<div style="transform:rotate(45deg)">
  <div style="transform:translateX(100px)"></div>
</div>
.box{
  width: 100px;
} 
.in{
  background-color: pink;
  height: 100px;
}
.out{
  background-color: lightblue;
  height: 100px;
}
<div class="box">
    <div class="out" style="-webkit-transform:rotate(45deg) translateX(100px);transform:rotate(45deg) translateX(100px);"></div>
    <div style="-webkit-transform:rotate(45deg);transform:rotate(45deg)">
      <div class="in" style="-webkit-transform:translateX(100px);transform:translateX(100px)"></div>
    </div>    
</div>

【2】變形transform中的多個變形函數的執行順序是從前向後依次執行

//第一種情況:旋轉45deg後，元素的x軸正向變成右下45deg，所以元素接下來的位移向這個方向移動
//第二種情況:元素向右移動100px後，元素的原點跟著元素一起平移，並一直在元素的中心位置，所以元素接下來的旋轉是原地旋轉


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python學習筆記二，基本知識
    1,在python中#以井號鍵開頭的是註釋的內容，解釋器不會管他； 2,在python中：以冒號結尾時，後面的縮進為其代碼塊，這是約定熟成的習慣，並且堅持一個縮進頂4個空格。（sublime Text設置一個tab頂4個空格：在preference——>seting-user中，在花括弧中添加如下一 ...
  • 子樹大小平衡樹（Size Balanced Tree，SBT）Insert操作模板及雜談
    基礎知識（包括但不限於：二叉查找樹是啥，SBT又是啥反正又不能吃，平衡樹怎麼旋轉，等等）在這裡就不（lan）予（de）贅（duo）述（xie）了。 由於學生黨比較忙，所以博文寫的比較簡略，有時間會慢慢補完 先貼代碼： 1 int seed; 2 int _rand() 3 { 4 return se ...
  • 2nd
    02.01_Java語言基礎(常量的概述和使用)(掌握) A:什麼是常量 在程式執行的過程中其值不可以發生改變 B:Java中常量的分類 字面值常量 自定義常量(面向對象部分講) C:字面值常量的分類 字元串常量 用雙引號括起來的內容 整數常量 所有整數 小數常量 所有小數 字元常量 用單引號括起來 ...
  • 11111
    ggg fffffffffffffffffffffffffffffffffffffffffffffff ...
  • 如何線程安全地遍歷List：Vector、CopyOnWriteArrayList
    遍歷List的多種方式 在講如何線程安全地遍歷List之前，先看看通常我們遍歷一個List會採用哪些方式。 方式一： 方式二： 方式三： 方式四（Java 8）： 方式五（Java 8 Lambda）： 首先，方式一的遍歷方法是一種非常不建議使用的方式，特別是對於LinkedList。LinkedL ...
  • Python學習筆記一，輸入輸出
    輸出：用print()在括弧中加上字元串，就可以向屏幕上輸出指定的文字。比如輸出'hello, world'，用代碼實現如下>>>print('hello,world') 也可以是多個字元串，中間用逗號鏈接‘；代碼實現如下>>>print('The quick bronw fox','jumps o ...
  • java靜態代理與動態代理
    原文鏈接：http://www.orlion.ga/207/ 一、代理模式 代理模式是經常用到的設計模式，代理模式是給指定對象提供代理對象。由代理對象來控制具體對象的引用。 代理模式涉及到的角色： 抽象主題角色:聲明瞭代理主題和真實主題的公共介面，使任何需要真實主題的地方都能用代理主題代替。 代理主 ...
  • 有關於MVC SignalR的問題
    剛拜讀 @Learning hard 的 [Asp.net 開發系列之SignalR篇]專題一：Asp.net SignalR快速入門 跟著博文一步步操作，這是新人的學習方式 然而筆者的開發環境和 @Learning hard 的有所不同，導致出現了一些小的問題！ 筆者環境 VS2013 + .ne ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類