技術標籤：前端學習csscss3前端

八.CSS3 2D 3D

• 前言
• CSS 2D轉換
• CSS 3D轉換

前言

轉換是使元素改變形狀、尺寸和位置的一種效果。在CSS3中新增了2D和3D的轉換方法。

CSS 2D轉換

其中轉換所需的新屬性如下：

• transform：設定元素為 2D 或 3D 轉換
• transform-origin：改變被轉換元素的源點位置

其中2D轉換常用的方法如下：

• matrix(n,n,n,n,n,n)：2D 轉換中，使用六個值的矩陣（複合屬性）
  matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

        div{
            border: lightskyblue 2px solid;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: lightsalmon;
            color: lightseagreen;
            transition: transform 2s;
            margin
 
:100px auto 20px;
        }
        div:hover{
            transform: matrix(.5,1,1,.5,1,-1);
        }

如圖利用:hover、matrix方法以及上一節提到的過渡transition，將2D轉換做出類似3D轉換的效果：

• translate(x,y)：2D 轉換中，沿著 X 和 Y 軸移動元素
• translateX(n)：2D 轉換中，沿著 X 軸移動元素
• translateY(n)：2D 轉換中，沿著 Y 軸移動元素
• scale(x,y)：2D 縮放轉換，改變元素的寬度和高度
• scaleX(n)：2D 縮放轉換，改變元素的寬度
• scaleY(n)：2D 縮放轉換，改變元素的高度
• rotate(angle)：2D 旋轉，在引數中規定旋轉的角度
• skew(x-angle,y-angle)：2D 傾斜轉換，沿著 X 和 Y 軸
• skewX(angle)：2D 傾斜轉換，沿著 X 軸
• skewY(angle)：2D 傾斜轉換，沿著 Y軸

div{
            border: lightskyblue 2px solid;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: lightsalmon;
            color: lightseagreen;
            transition: transform 2s;
            margin:100px auto 20px;
        }
        div:hover{
            transform: rotate(30deg) translate(20px,20px) scale(.7,.7) skew(10deg,10deg);
        }

將如上程式碼應用後：

CSS 3D轉換

明日繼續哈~

以上為本萌新個人總結，如有不當之處望指正，有問題可以聯絡
郵箱：[email protected]或
QQ：2635591841

更於2021.2.2