如何優雅的使用css3的矩陣變換matrix(矩陣)

時間 2019-11-08

標籤如何優雅使用 css3 css 矩陣變換 matrix 欄目 CSS 简体版

原文原文鏈接

在寫文章的開始首先致謝張鑫旭大神的一篇文章：《理解CSS3 transform中的Matrix(矩陣)》，由於這篇文章給了我很大的啓發，雖然文章寫得足夠清晰明瞭可是對於我這個不懂矩陣的人仍是很難使用上matrix 這個高大上的玩意兒！若是你不懂矩陣也不要緊！css

1、概念

matrix實際上是能夠代替：偏移量（translate）,縮放（scale），斜切（skew），旋轉（rotate），四大功能的，任意一個matrix樣式改變而來的形狀也都能經過以上四個功能實現，它們是互通的。html

2、理解

假定matrix的六個參數用字母表示以下：transform: matrix(a,b,c,d,e,f);ui

e和f 表明着偏移量translate，x和y軸spa
a和d 表明着縮放比例scale,x 和y軸code
b和c 表明着斜切skew（具體參數和角度關係爲, b-->tanθ y軸 c-->tanθ x軸 ,咱們具體操做的時候仍是要使用小數的）orm
abcd 中的ad表明縮放(scale),bc表明者斜切(skew); abcd四個參數表明着旋轉，這你可能難以理解，請繼續往下看。xml

旋轉是能夠理解爲, 旋轉=規律的縮放+規律的斜切 這裏的意思是旋轉能夠用縮放和斜切一塊兒用來獲得, 二者聯繫在於這個角度θ。具體以下：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
htm

而後你就知道了，爲啥6個數能作到，translate，scale，skew，rotate了，由於一個對應兩個參數，原來最後一個rotate 被縮放和斜切給替代了(看到這裏建議去看看實例中，如何用矩陣實現旋轉的，還有斜切和縮放如何實現旋轉。)blog

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>理解矩陣變換</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.box{ background:green; width: 200px; height: 200px; margin: 50px auto;}

/* 理解旋轉是如何使用前四個參數的 */
.b1{transform: rotate(30deg);}

/* 矩陣具體寫法 */
.b2{ transform: matrix(0.86603,0.5,-0.5,0.86603,1,1);}

/* 用斜切和變形來模擬,同時這裏的參數是對應矩陣裏的參數 ，斜切中的30deg的意思是,矩陣中的 sin30*  和 -sin30* 這兩個斜切參數*/
.b3{ transform:skew(-30deg,30deg) scale(0.86603,0.86603);}
</style>
</head>
<body>
    <div class="box b1"></div>
    <div class="box b2"></div>
    <div class="box b3"></div>
    <div class="box"></div>
</body>
</html>