CSS3 transform 屬性詳解

時間 2019-11-17

標籤 css3 css transform 屬性詳解欄目 CSS 简体版

原文原文鏈接

Transform 屬性

css3 中 transfrom 屬性用戶元素空間位置的變換。
本文結果中展現的畫面都是基於下圖進行的變換css

二維變換

Matrix

3x3 的變換矩陣
對二維向量進行轉換

其中 x一、y1 爲通過 Matrix 轉換後的向量。由公式可知，Matrix 中 e, f 主要用於設置元素在 X軸和 Y軸上的平移。a, d 主要用於設置元素在 X軸和 Y軸上的縮放。a,b,c,d 用於設置元素在 XY 平面上的旋轉。rotate/translate/screw 等均可以直接經過設置 Matrix 來達到一樣的效果

translate

設置元素在 X軸或者 Y軸上的平移變換

translate(15px, 25px)      #元素沿着 X軸正方向平移 15px，沿着 Y軸正方向平移 25px
Matrix(1, 0, 0, 1, 15, 25) #效果相同
複製代碼

scale

設置元素在 X軸或者 Y軸上的縮放

scale(2, 0.5)              #元素在 X軸上拉伸一倍，在 Y軸上縮小一倍
Matrix(2, 0, 0, 0.5, 0, 0) #效果相同
複製代碼

scale 的參數爲負數時，元素在對應的方向上進行反轉

rotate

二維空間中，rotate即圍繞屏幕法向量旋轉，等同於 rotateZ

rotate(30deg)                         #圍繞屏幕法向量順時針旋轉 30度
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
複製代碼

skew

設置 X軸和 Y軸的傾斜角度

transform-origin

transform 變換原點html

默認值爲(50%, 50%, 0)，即默認的變換原點位於變換元素的 Z=0 的 XY 平面的中心點
取值爲 (<length>|<percentage>|left|center|right, <length>|<percentage>|top|center|bottom, <lenght>) 三個參數從左到右分別表示變換原點相盒模型左側的偏移量、盒模型頂部的偏移量以及 Z軸偏移量

rotate(30deg);
複製代碼

rotate(30deg);
transform-origin: 'left top';
複製代碼

設置 transform-origin 爲元素坐上點後，元素圍繞左上角旋轉css3

transform 各個變換執行順序

旋轉和平移變換同時進行

transform: translateX(100px) rotate(90deg);
複製代碼

結果以下圖所示，能夠發現，結果中黃色方框先沿着X軸正方向移動100px，而後繞Z軸進行了90度順時針渲染。故 transform 中，各個變換是從左往右依次執行 web

transform:  rotate(90deg) translateX(100px);
複製代碼

接着，咱們將 transform 中兩個變換順序調轉，結果以下圖所示。能夠發現黃色方框先繞Z軸旋轉90度，而後沿着X軸正方向移動100px。 bash

matrix 矩陣運算

由上一章節可知，本章節中平移變換 translateX(100px) 對應的變換矩陣 translateMat 爲spa

\begin{bmatrix}
{1}&{0}&{100}\\
{0}&{1}&{0}\\
{0}&{0}&{1}\\
\end{bmatrix}

rotate(90deg)對應的變換矩陣 rotateMat 爲3d

\begin{bmatrix}
{0}&{-1}&{0}\\
{1}&{0}&{0}\\
{0}&{0}&{1}\\
\end{bmatrix}

對 translateMat 和 rotateMat 進行矩陣乘積運算，並將運算結果導入 transform 屬性，查看結果code

rotateMat * translateMat
結果爲

\begin{bmatrix}
{0}&{-1}&{0}\\
{1}&{0}&{100}\\
{0}&{0}&{1}\\
\end{bmatrix}

CSS 代碼爲transform: matrix(0, 1, -1, 0, 0, 0)，運行結果以下圖所示，可見設置 matrix 等於 rotateMat * translateMat 的變換效果等效於transform: rotate(90deg) translateX(100px);orm

三維變換

CSS3三維世界座標系以下圖所示，採用的是左手座標系，Y軸方向沿着屏幕向下 cdn

perspective

perspective 定義了 3D 元素和視圖之間的距離。設置的是透視鏡頭到 XY 軸平面的距離

perspective 設置的是透視點到屏幕及(XYZ空間中Z=0平面的距離)，即透視點位置爲(0, 0, 150px)

<!DOCTYPE html>
<html>
    <head>
        <style>
        #div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ #設置 perspecctive 爲 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
複製代碼

結果：

將 perspective 設置爲 1500px，結果爲：

perspective 的值與元素呈現的大小無關，perspective 表示透視點到元素的距離，透視點越遠，透視效果越差

添加了 perspective 屬性的元素，添加後場景中出現 Z軸，故其子元素得到 3D 效果，包括 translateZ 和 rotateY/rotateX

translateZ

經過在 transform 中添加 translateZ 屬性，能夠實現元素在 Z軸上的平移變化

在添加 perspective 元素的子元素上的 transform 屬性中添加 translateZ

<!DOCTYPE html>
<html>
    <head>
        <style>
        #div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ #設置 perspecctive 爲 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: translateZ(-50px) rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
複製代碼

在 id=div2 的元素上添加了 translateZ(-50px)，即將元素沿着 Z軸負軸平移了 150px，結果爲：

CSS3 中的三維座標系採用的是左手座標系，Z軸垂直屏幕向外，故將 div2 沿着 Z軸負軸平移 50px 後，裏面的元素實際上位於了屏幕後面 50px 的位置，故看起來變小了

rotateY/rotateX

rotateY 和 rotateX 能夠設置元素圍繞 Y軸或 X軸進行順旋轉

rotateY(45deg) #圍繞 Y軸順時針旋轉 45 度
rotateX(-45deg) #圍繞 Z軸逆時針旋轉 45 度
複製代碼

Matrix3D

TODO

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。