<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    web前端入門到實戰:CSS3常用轉換總結

    發布時間:2020-06-11 05:20:33 來源:網絡 閱讀:121 作者:前端向南 欄目:web開發

    一、2D轉換

    • translate(npx,npx)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前元素位置移動

    /* 實現div向左移動50個像素,并向下移動100個像素 */
    
    div
    {
                transform: translate(50px,100px);
            -ms-transform: translate(50px,100px); /* IE 9 */
        -webkit-transform: translate(50px,100px); /* Safari and Chrome */
    }
    web前端開發學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (詳細的前端項目實戰教學視頻,PDF)
    • rotate(ndeg)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前角度旋轉

    /* 實現div順時針旋轉30度 */
    
    div
    {
                transform: rotate(30deg);
            -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    
    • scale(n,n)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前大小縮放

    /* 實現div寬度加長2倍,高度增高3倍 */
    
    div
    {
                transform: scale(2,3);
            -ms-transform: scale(2,3);
        -webkit-transform: scale(2,3);
    }
    
    • skew(ndeg,ndeg)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前角度透視傾斜

    /* 實現div在X軸和Y軸上分別傾斜20度和30度 */
    
    div
    {
                transform: skew(30deg,20deg);
            -ms-transform: skew(30deg,20deg);
        -webkit-transform: skew(30deg,20deg);
    }
    
    • matrix(n,n,n,n,n,n)?

    web前端入門到實戰:CSS3常用轉換總結

      復合屬性,六個參數分別包含旋轉,縮放,移動(平移)和傾斜功能

    /* 實現div旋轉30° */
    
    div
    {
                transform:matrix(0.8,0.5,-0.5,0.8,0,0);
            -ms-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
        -webkit-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
    }
    

    二、3D轉換

    • rotateX(ndeg)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前角度圍繞X軸旋轉

    
    /* 實現div圍繞X軸旋轉45度 */
    
    div
    {
                transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }
    
    • rotateZ(ndeg)?

    web前端入門到實戰:CSS3常用轉換總結

      相對當前角度圍繞Z軸旋轉

    /* 實現div圍繞Z軸旋轉45度 */
    
    div
    {
                transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
    }
    web前端開發學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (詳細的前端項目實戰教學視頻,PDF)
    • 3D轉換之translate

    translateX(npx)

    web前端入門到實戰:CSS3常用轉換總結

     相對當前元素位置沿X軸移動

    translateY(npx)
      相對當前元素位置沿Y軸移動

    translateZ(npx)
      相對當前元素位置沿Z軸移動

    translate3d(x,y,z)

    • 3D轉換之scale

    scaleX(n)

    web前端入門到實戰:CSS3常用轉換總結

     相對當前元素位置沿X軸縮放

    scaleY(n)
      相對當前元素位置沿Y軸縮放

    scaleZ(n)
      相對當前元素位置沿Z軸縮放

    scale3d(x,y,z)

    • 3D轉換之rotate

    rotateX(ndeg)

    web前端入門到實戰:CSS3常用轉換總結

      相對當前元素位置沿X軸旋轉

    rotateY(ndeg)
      相對當前元素位置沿Y軸旋轉

    rotateZ(ndeg)
      相對當前元素位置沿Z軸旋轉

    rotate3d(xdeg,ydeg,zdeg)

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2