新聞資訊
                                  記錄首創點滴進步 見證遠行
                                  我們一直緊跟時代前沿,聚焦行業實時動態,發布公司最新資訊,歡迎您的關注

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

                                  日期:2022-09-15發布:首創網絡瀏覽:605次

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

                                    本文關鍵字:邯鄲網絡公司,邯鄲網站建設,網站優化,SEO,企業畫冊,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

                                    24小時技術支持
                                    18931045623
                                    在線客服

                                  首創簡介

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

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

                                  在線客服


                                  • 掃描加微信

                                  • 掃描加QQ

                                  • 掃描瀏覽手機版
                                  首創網絡邯鄲公司
                                  邯鄲公司
                                  電話:0310-4559740 / 18931045623  地址:邯鄲市叢臺區頤高廣場B座13層1304室
                                  一区二区久无码久免费视频