本文小編為大家詳細介紹“CSS2D轉換、3D轉換的transform知識點有哪些”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“CSS2D轉換、3D轉換的transform知識點有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務，在本地打下了良好的口碑，在過去的十載時間我們累計服務了上千家以及全國政企客戶，如成都酒樓設計等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質(zhì)量監(jiān)控加上過硬的技術實力獲得客戶的一致稱揚。

2D轉換

定義：2D變換，是在一個平面對元素進行的操作。

可以對元素進行水平或者垂直位移、旋轉或者拉伸。

確定坐標系

默認狀態(tài)下，x軸是水平的，向右為正。

默認狀態(tài)下，y軸是垂直的，向下為正。

變形屬性：transform

屬性值：

transform：none;默認值

transform：translate（）；移動 平移 單位是px

transform：rotate（）；旋轉 單位是deg deg度數(shù)

transform：scale（）；縮放 沒有單位 默認值是1

transform：skew（）；傾斜 單位是deg

transform：matrix（）；矩陣

transform：perspective（）；景深 視距 單位是px

平移屬性

transform ：none； 說明：定義不進行轉換。

transform ：translate(200px)；平移，默認是X軸移動，可以單位是%，這個%是自己的，不是父元素的

transform ：translate(200px)； 默認是按照X軸移動

transform ：translateX(200px)； 根據(jù)X軸給定的參數(shù)，從當前元素位置移動。

transform ：translateY(200px)； 根據(jù)Y軸給定的參數(shù)，從當前元素位置移動。

transform ：translate(10px,20px)； 定義 2D 平移移動。

旋轉屬性

transform ：rotate(30deg)； 默認是按照Z軸旋轉。

transform ：rotateX(30deg)；根據(jù)X軸給定的參數(shù)，從當前元素位置旋轉。

transform ：rotateY(30deg)； 根據(jù)Y軸給定的參數(shù)，從當前元素位置旋轉。

縮放屬性

transform ：scale(0.2)； 默認是X和Y同時縮放。

ransform ：scaleX(2)； 通過設置 X 軸的值來定義縮放轉換

transform ：scaleY(3)； 通過設置 Y 軸的值來定義縮放轉換。

transform ：scale(2,5)； 定義 2D 縮放。

transform ：scaleX(2) scaleY(3) ；該元素增加或減少的大小，

取決于寬度（X軸）和高度（Y軸）的參數(shù)，可以取負值。

只不過取負值時，會先讓元素進行翻轉（順時針180deg），

然后在進行縮放。

傾斜屬性

transform ：skew(30deg)； 默認是X軸傾斜。

transform ：skewX(30deg)；通過設置 X 軸的值來定義傾斜轉換

transform ：skewY(30deg)；通過設置 Y 軸的值來定義傾斜轉換

transform ：skew(30deg,130deg)； 定義 2D 傾斜

transform-origin改變元素基點的位置 屬性值可加left right.....

主要作用：讓我們在進行transform動作之前可以改變元素的基點位置。

1.transform-origin(X,Y):用來設置元素的運動的基點（參照點）。

2.transform-origin(X，Y，Z)；其中的Z軸的設置，只能是數(shù)值。

轉換基點

改變元素基點的位置transform-origin

他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置。

A、transform-origin(X,Y):用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數(shù)值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom。

B、transform-origin(X，Y，Z)；其中的Z軸的設置，只能是數(shù)值。

讀到這里，這篇“CSS2D轉換、3D轉換的transform知識點有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：CSS2D轉換、3D轉換的transform知識點有哪些
轉載來源：http://jinyejixie.com/article32/ipejsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、網(wǎng)站設計公司、品牌網(wǎng)站設計、商城網(wǎng)站、面包屑導航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)