Css3 筆記 動畫 和定位屬性

来源:https://www.cnblogs.com/lanyubaicl/archive/2019/03/22/10579525.html
-Advertisement-
Play Games

transform 變形屬性屬性:translate 平移,rotate 旋轉, scale 縮放,skew 傾斜 ◆ translate :指定對象的2D平移第一個參數對應X軸,第二參數對應Y軸;如果第二個參數未提供,則預設為0;translate(10px,10px)X軸 往左邊移動 對應第一個 ...


 

transform 變形屬性
屬性:translate 平移,rotate 旋轉, scale 縮放,skew 傾斜

◆ translate :指定對象的2D平移
第一個參數對應X軸,第二參數對應Y軸;如果第二個參數未提供,則預設為0;
translate(10px,10px)
X軸 往左邊移動 對應第一個參數的值 就是正數值。
Y軸 往下麵移動 對應第二個參數的值 就是正數值。

◆ rotate :控制對象的2D旋轉,需要先定義transform-origin屬性;
列:Rotate(90deg),transform-origin:0 0;
角度值 為 正數值 對象順時針轉,負數對象逆時針轉;

transform-origin 如果不設置坐標,預設元素對象的中心點。
transform-origin:0 0; 以元素的左上角為中心點旋轉;

◆ scale: 指對象的2D縮放。可以同transform-origin 一起使用。
第一個參數對應X軸 ;第二個參數對應Y軸;如果第二個參數未提供預設取第一個參數的值;
例如:scale(0.5,0.5);
參數值 為 1 時,不縮放,小於1時往裡面縮小;大於1時,往大放。
配合transform-origin使用時,是沿著中心點縮放。

◆ skew : 指定對象斜切;
第一個參數對應軸,第二個參數對應Y軸;,如果第二個參數未提供預設為0;
例如:skew(50deg,2deg);
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ 3D
◆ style : 樣式,變形樣式;
transform-style:preserve-3d; 此設置3D變形效果;
X軸正方嚮往左邊;Y軸正方嚮往下麵;Z軸正方向面向屏幕前面,指向我們。
translateX(x px) ;X軸平移
translateY(y px) ;Y軸平移
translateZ(z px) ;Z軸平移
rotateX(x deg) ;沿著X軸進行旋轉
rotateY(y deg) ;沿著Y軸進行旋轉
rotateZ(z deg) ;沿著Z軸進行旋轉

◆旋轉中心設置:transform-origin
X軸 可設置為:left 或 center 或 right;
Y軸 可設置為:top 或 center 或 bottom;
Z軸 可設置為:length px; 具體長度;

*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ transition 過度動畫處理
transition:<過渡屬性名稱><過渡時間><過渡模式>
屬性:property ,duration,timing-funciton,delay;
property : 檢索或設置對象中的參與過渡的屬性;設置原始的那些屬性參與動畫。
duration : 過渡動畫的持續時間;
timing-function : 檢索或設置對象中過渡的動畫類型(
linear : 動畫從頭到尾的速度是相同的,
ease : 動畫以低速開始,然後加快,在結束前變慢,
ease-in : 動畫以低速開始,
ease-out : 動畫以低速結束,
ease-in-out : 動畫以低速開始和結束

delay : 設置對象延遲過渡的時間。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ position 屬性決定元素如何定位,通過top,bottom,left,right實現位置的改變;
static:預設值,元素按照標準流的方式正常排列。
*-*-*-*-*-*-*-*-*-*-*-
relative:相對定位,相對元素自身原始位置,通過 top,bottom,left,right實現位置定位;
當處於父級容器中時,相對父級容器內,本身位置作為標準,通過 top,bottom,left,right進行定位;
*-*-*-*-*-*-*-*-*-*-*-
absolute:絕對定位,相對瀏覽器視窗的定位。
當父元素 是absolute定位或者relative時,那麼子元素是按父元素進行absolute絕對定位。
當父容器沒有定位,那麼子元素按瀏覽器視窗進行定位。
*-*-*-*-*-*-*-*-*-*-*-
fixed:絕對定位,不受父元素父容器限制。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
z-index
可以設置元素的疊加順序,但依賴定位屬性
z-index 大的元素會覆蓋z-index小的元素
z-index為auto的元素不參與層級比較;
z-index為負值,元素被普通流中的元素覆蓋;

 


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

-Advertisement-
Play Games
更多相關文章
  • Mysql常用命令 啟動 net start mysql 關閉 net stop mysql 連接mysql mysql uroot ppssword mysql uroot P3307 ppssword 修改密碼 mysqladmin uroot p123456 password 123 增加用戶 ...
  • In order to build a complete ffmpeg with hardware acceleration for Intel platform (XXX lake + Atom), we need a complete Android x86 build, the cross-c ...
  • 程式6:用*號輸出字母C的圖案 console.log(' ****'); console.log(' ***'); console.log(' **'); console.log(' *'); console.log('*'); console.log(' *'); console.log(' * ...
  • 非同步請求 其實什麼是非同步請求已經不用多說了,通俗的說,就是整個頁面不會刷新,需要更新的部分數據做局部刷新,其他數據不變。 學到這裡,你應該用過jquery里的ajax了,所以很能理解了,不多說了。詳細的就自己百度了 在vue中,可以做非同步請求的有vue-resource和axios ... ...
  • global對象 瀏覽器端JavaScript中的全局對象為“window”,在瀏覽器中定義的變數都會成為“window”對象的屬性。 不像瀏覽器端JavaScript,在Nodejs中沒有window對象,Nodejs中的全局對象為“global”,並且我們定義的變數不會作為“global”的屬性 ...
  • 在開始講 Angular 各個核心知識點之前,想先來講講開發工具 WebStorm 的一些配置以及相應配置文件如 tslint.json 的配置。 因為我個人比較註重代碼規範、代碼風格,而對於這些規範,我只有一個觀點: 一切需要依賴開發人員的主觀意識去遵守的規範都沒有多大意義。 以前做 Androi ...
  • 事件機制 React事件主要分為兩部分: 事件註冊與事件分發。下麵先從事件註冊說起。 事件註冊 假設我們的程式如下: 事件註冊主要發生在初始化Dom屬性的時候,調用 方法,對一些類型dom進行事件綁定。 js switch (tag) { case 'iframe': case 'object': ...
  • 一、自定義函數function 函數就是功能、方法的封裝。函數能夠幫我們封裝一段程式代碼,這一段代碼會具備某一項功能,函數在執行時,封裝的這一段代碼都會執行一次,實現某種功能。而且,函數可以多次調用。 1.1函數的定義和調用 語法: 定義:把需要實現的功能預先做好 執行:需要的時候執行這個功能,而且 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...