<var id="f92es"></var>
    1. <object id="f92es"></object>

      <strong id="f92es"></strong><strike id="f92es"><listing id="f92es"></listing></strike>
    2. <rp id="f92es"><object id="f92es"><input id="f92es"></input></object></rp>
    3. <dd id="f92es"><pre id="f92es"><dl id="f92es"></dl></pre></dd>
        1. 新聞資訊
          記錄首創點滴進步 見證遠行
          我們一直緊跟時代前沿,聚焦行業實時動態,發布公司最新資訊,歡迎您的關注
          您目前的位置:首頁>>新聞資訊>>公司動態

          9.15日音訊,首創網絡談CSS中transform屬性

          發布日期:2022-09-15文章來源:首創網絡瀏覽次數:182次
            9.15日音訊,首創網絡談CSS中transform屬性。通過transform,可以讓元素進行移動(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)。如果該屬性有一個非none值,將會產生一個層疊上下文.在這種情···
            本文關鍵字:邯鄲網絡公司,邯鄲網站建設,網站優化,企業畫冊,VI設計,首創網絡

            9.15日音訊,首創網絡談CSS中transform屬性。通過transform,可以讓元素進行移動(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)。如果該屬性有一個非none值,將會產生一個層疊上下文.在這種情況下對象將作為它包含的position:fixed元素的包含塊(acontainingblock)。

            1.移動:translate

            一個值:transform:translate(100px)

            表示水平方向移動的位移,等同于translateX(100px)

            translateX(x):沿X軸位移

            translateY(y):沿Y軸位移

            translateZ(z):沿Z軸位移

            兩個值:transform:translate(100px,200px)

            第一個表示水平方向移動的位移,第二個表示垂直方向移動的位移

            translate(x,y):沿XY軸位移

            三個值:translate3d(10px,20px,10px)

            表示3D三個方向移動的位移,順序為X,Y,Z

            2.旋轉:transform:rotate(ndeg)(其中n為旋轉度數)

            以角度(deg)為單位,正數是順時針旋轉,負數是逆時針旋轉

            rotate():2D旋轉

            rotateX():沿著X軸3D旋轉

            rotateY():沿著Y軸3D旋轉

            rotateZ():沿著Z軸3D旋轉.要在其父級配合transform-style:preserve-3d;使用

            rotate3D(x,y,z,ndeg):3D旋轉,接受四個參數,x,y,z介于0-1之間,n是旋轉的度數。元素圍繞著xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度,這就是rotate3D。

            3.縮放:scale

            一個值:transform:scale(1)

            表示水平跟垂直方向同時放大1倍

            兩個值:transform:scale(1,2)

            第一個參數表示水平方向的縮放比例,第二個參數表示垂直方向的縮放比例,

            等同于scaleX(1)和scaleY(2)

            三個值:scale3d(0.5,0.3,0.4)

            表示3D三個方向縮放的比例,順序為X,Y,Z軸

            數值為負時為縮小

            4.傾斜:skew

            一個值:transform:skew(10deg)

            表示水平方向的傾斜角度,等同于skewX(10deg)

            skewX:表示水平方向的傾斜角度

            skewY:表示垂直方向的傾斜角度

            兩個值:transform:skew(10deg,20deg)

            第一個參數表示水平方向的傾斜角度,第二個參數表示垂直方向的傾斜角度

            5.元素的基點:transform-origin:10px20px

            值得注意的是:在進行以上的變形操作時,默認都是以元素的中心為基點.

            要想改變基點則可以使用transform-origin屬性

            有兩個參數:第一個表示距離元素左上角水平方向的距離,第二個表示距離元素左上角垂直方向的距離。

            第一個參數可以設置為left、center、right,第二個參數可以設置為top、center、bottom。

            6.合寫:transform:rotate(45deg)scale(1)skew(40deg,30deg)translate(100px200px)

            本文由邯鄲網絡公司首創網絡整理編輯發布,請勿轉載、復制、摘抄等!

          + 查看更多我們的客戶 / Our client

          0310-4559740
          400-990-1661
            24小時技術支持
            18931045623
          在線客服

          首創簡介

            首創網絡成立于2012年,是一家專業的品牌網站設計和網絡營銷推廣公司,服務領域涵蓋網站設計、市場策劃、企業畫冊及VI視覺設計、網站域名空間等領域,公司擁有一批高素質人才,著力打造品牌網站設計制作和網上營銷策略執行兩大優勢。

            九年來,憑借對市場趨勢敏銳的洞察,和對消費者、企業形態深刻的理解,我們服務的已遍及京津冀、長三角、珠三角等領域,行業覆蓋政府機構、企事業單位、無線通訊、環保、電子、醫藥、交通、園林、地產等行業,諸多知名企業,如廣州京信集團、廣東聯通廣州分公司、搜狐家居廣州站、搜狐家居邯鄲站等,都鑒證了首創設計公司的品牌設計思想與能力,首創設計公司也與諸多企業勃的市場經濟中互促共生。

          在線客服


          • 掃描加微信

          • 掃描加QQ

          • 掃描瀏覽手機版
          首創網絡邯鄲公司
          邯鄲公司
          電話:0310-4559740 / 18931045623  地址:邯鄲市叢臺區頤高廣場B座13層1304室
          国产AV无码片毛片一级流奶水
          <var id="f92es"></var>
          1. <object id="f92es"></object>

            <strong id="f92es"></strong><strike id="f92es"><listing id="f92es"></listing></strike>
          2. <rp id="f92es"><object id="f92es"><input id="f92es"></input></object></rp>
          3. <dd id="f92es"><pre id="f92es"><dl id="f92es"></dl></pre></dd>