红穆笔记
首頁 › 語言筆記 › css3 2D動畫（transform）
語言筆記 CSS

css3 2D動畫（transform）

瀏覽 161 📖 約 16 分鐘
css3 2D动画（transform）

transform語法：

transform：none | <transform-function>+
transform-function list:
matrix() = matrix(<number>[,<number>]{5,5})

matrix3d() = matrix3d(<number>[,<number>]{15,15})

translate() = translate(<translation-value>[,<translation-value>]?)

translate3d() = translate3d(<translation-value>,<translation-value>,<length>)

translatex() = translatex(<translation-value>)

translatey() = translatey(<translation-value>)

translatez() = translatez(<length>)

rotate() = rotate(<angle>)

rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)

rotatex() = rotatex(<angle>)

rotatey() = rotatey(<angle>)

rotatez() = rotatez(<angle>)

scale() = scale(<number>[,<number>]?)

scale3d() = scale3d(<number>,<number>,<number>)

scalex() = scalex(<number>)

scaley() = scaley(<number>)

scalez() = scalez(<number>)

skew() = skew(<angle>[,<angle>]?)

skewx() = skewx(<angle>)

skewy() = skewy(<angle>)

perspective() = perspective(<length>)

<translation-value> = <length> | <percentage>

默認值：none

適用於：所有塊級元素及某些內聯元素

繼承性：無

動畫性：是

計算值：指定值，但相對長度會轉換爲絕對長度

媒體：視覺

transform取值：

none： 無轉換

2D Transform Functions：

matrix()： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣
translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值爲0
translatex()： 指定對象X軸（水平方向）的平移
translatey()： 指定對象Y軸（垂直方向）的平移
rotate()： 指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義
scale()： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值
scalex()： 指定對象X軸的（水平方向）縮放
scaley()： 指定對象Y軸的（垂直方向）縮放
skew()： 指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值爲0
skewx()： 指定對象X軸的（水平方向）扭曲
skewy()： 指定對象Y軸的（垂直方向）扭曲 3D Transform Functions：
matrix3d()： 以一個4x4矩陣的形式指定一個3D變換
translate3d()： 指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
translatez()： 指定對象Z軸的平移
rotate3d()： 指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
rotatex()： 指定對象在x軸上的旋轉角度
rotatey()： 指定對象在y軸上的旋轉角度
rotatez()： 指定對象在z軸上的旋轉角度
scale3d()： 指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
scalez()： 指定對象的z軸縮放
perspective()： 指定透視距離 說明：設置或檢索對象的轉換。
對應的腳本特性爲transform。

transform示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>2D transform_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="https://www.4s5.cn/" />
<style>
h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
.test li p{width:300px;height:100px;margin:0;background:#ddd;}
.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
</style>
</head>
<body>
<h1>矩陣變換：matrix()</h1>
<ul class="test">
    <li class="matrix">
        <p>transform:matrix(0,1,1,1,10,10)</p>
    </li>
</ul>
<h1>平移：translate(), translateX(), translateY()</h1>
<ul class="test">
    <li class="translate">
        <p>transform:translate(5%,10px)</p>
    </li>
    <li class="translate2">
        <p>transform:translate(-10px,-10px)</p>
    </li>
    <li class="translateX">
        <p>transform:translateX(20px)</p>
    </li>
    <li class="translate3">
        <p>transform:translate(20px)</p>
    </li>
    <li class="translateY">
        <p>transform:translateY(10px)</p>
    </li>
    <li class="translate4">
        <p>transform:translate(0,10px)</p>
    </li>
</ul>
<h1>旋轉：rotate()</h1>
<ul class="test">
    <li class="rotate">
        <p>transform:rotate(-15deg)</p>
    </li>
    <li class="rotate2">
        <p>transform:rotate(15deg)</p>
    </li>
</ul>
<h1>縮放：scale()</h1>
<ul class="test">
    <li class="scale">
        <p>transform:scale(.8)</p>
    </li>
    <li class="scale2">
        <p>transform:scale(1.2)</p>
    </li>
</ul>
<h1>扭曲：skew()</h1>
<ul class="test">
    <li class="skew">
        <p>transform:skew(-5deg)</p>
    </li>
    <li class="skew2">
        <p>transform:skew(-5deg,-5deg)</p>
    </li>
</ul>
</body>
</html>

微信赞赏

微信

支付宝赞赏

支付寶

版權聲明 · 禁止轉載

本文作者： 紅穆

本文鏈接： https://www.4s5.cn/cht/archives/196.html

版權說明：本文爲原創文章，未經授權禁止任何形式的轉載、採集、鏡像，違者必究。如需轉載請註明出處並保留原文鏈接。

✍️ 作者： 紅穆

網站管理員 · 感謝閱讀，更多精彩內容敬請關注

作者主頁 查看主頁 →

相關文章

css 定位（position）

css 定位（position） 語言筆記 CSS

語法：position：static | relative | absolute | fixed | center | page | sticky默認值：static適用於：除display屬性定義爲table-column-group | table-column之外的所有元素繼承性：無動畫性：否…
👁 119
css vh和vw自适应

css vh和vw自適應 語言筆記 CSS

　　在移動端中利用REM的相對於根HTML進行改變，通過一段JS實現了移動端自適應，本文則使用純CSS視口單位來自行自適應，雖然現在的兼容性還沒法完全能夠接受，但不妨礙你認識這個vw和vh的強大。 響應式佈局的實現依靠媒體查詢( Media Queries )來實現，選取主流設備寬度尺寸作爲斷點針對…
👁 356
CSS border

CSS border 語言筆記 CSS

div{ border:2px solid; border-radius:25px; }定義和用法border-radius 屬性是一個簡寫屬性，用於設置四個 border-radius 屬性。提示：該屬性允許您爲元素添加圓角邊框！默認值：0繼承性：no版本：CSS3JavaScript 語法：ob…
👁 175

推薦閱讀

资源网站typecho001模板

資源網站typecho001模板 程序筆記 Typecho

typecho001模板板本請勿修改本模板文件夾名稱 文件夾名稱爲：typecho001 1.4修復文章頁面js輸出問題1.3修復未安裝插件時的報錯提示優化列表頁代碼輸出1.2修復評論功能增加自定義首頁標題1.1修復評論回覆不對稱功能添加首頁單獨的標題設置功能增加網站favicon.ico圖標增加一…
👁 198
typecho分页样式的修改

typecho分頁樣式的修改 程序筆記 Typecho

大人，時代變了！目前typecho最完美的解決方案了，因爲百度只能看到固定思維的代碼。實際生成的html代碼，乾淨到讓人窒息完全的自定義，包括給li元素加上class，給a元素加上class，給上一頁下一頁加上class，去除typecho自帶用於表示更多的li標籤。甚至裏面的內容我也能添加一些文字…
👁 517
typecho文章页评论样式修改

typecho文章頁評論樣式修改 程序筆記 Typecho

需求使用 typecho 進行模板開發的時候，默認評論樣式很難看。因此需要評論需要重新輸出或進行樣式設定。默認的評論模板文件路徑是：comments.php主要使用的相關變量&lt;?php $comments-&gt;gravatar('40', ''); ?&gt; //頭像，有兩個參數，大小、…
👁 388
Typecho 对数据库的增删改查操作方法 API

Typecho 對數據庫的增刪改查操作方法 API 程序筆記 Typecho

Typecho數據庫提供了非常易用的api，和原生SQL寫法沒有太大的差別，同時也很好地處理了SQL常見的安全問題，如sql注入。本文從實用角度出發，介紹了typecho操作數據庫的常用場景以及相關api用法。表創建和刪除在Typecho插件開發過程中，往往需要創建自己的表。上文提到Typecho_…
👁 552
PHP ob函数记录

PHP ob函數記錄 語言筆記 PHP

下面3個函數的用法 ob_get_contents(); ob_end_clean(); ob_start(); 可以藉助這幾個函數實現緩衝本地文件，以及執行本地腳本代碼。 使用ob_start()把輸出的代碼存到緩衝區，頁面不會顯示出來; 然後用ob_get_contents得到緩衝區的數據。 o…
👁 141
Typecho调用热门评论文章和调用最新文章的方法总结

Typecho調用熱門評論文章和調用最新文章的方法總結 程序筆記 Typecho

Typecho文章調用Typecho程序在設計主題的時候，側欄有些時候需要調用熱評文章或者最新文章。我們可以在指定的位置通過腳本直接調用。在這篇文章整理這個調用文章的方法，以後在有需要的模板中可以直接調用使用。其實設計主題就那麼回事，靜態模板搞定後，就是直接調用。最新文章調用 &lt;?php $t…
👁 295