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

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

2D轉(zhuǎn)換

定義：2D變換，是在一個(gè)平面對(duì)元素進(jìn)行的操作。

可以對(duì)元素進(jìn)行水平或者垂直位移、旋轉(zhuǎn)或者拉伸。

確定坐標(biāo)系

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

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

變形屬性：transform

屬性值：

transform：none;默認(rèn)值

transform：translate（）；移動(dòng) 平移 單位是px

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

transform：scale（）；縮放 沒有單位 默認(rèn)值是1

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

transform：matrix（）；矩陣

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

平移屬性

transform ：none； 說明：定義不進(jìn)行轉(zhuǎn)換。

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

transform ：translate(200px)； 默認(rèn)是按照X軸移動(dòng)

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

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

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

旋轉(zhuǎn)屬性

transform ：rotate(30deg)； 默認(rèn)是按照Z軸旋轉(zhuǎn)。

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

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

縮放屬性

transform ：scale(0.2)； 默認(rèn)是X和Y同時(shí)縮放。

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

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

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

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

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

只不過取負(fù)值時(shí)，會(huì)先讓元素進(jìn)行翻轉(zhuǎn)（順時(shí)針180deg），

然后在進(jìn)行縮放。

傾斜屬性

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

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

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

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

transform-origin改變?cè)鼗c(diǎn)的位置 屬性值可加left right.....

主要作用：讓我們?cè)谶M(jìn)行transform動(dòng)作之前可以改變?cè)氐幕c(diǎn)位置。

1.transform-origin(X,Y):用來設(shè)置元素的運(yùn)動(dòng)的基點(diǎn)（參照點(diǎn)）。

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

轉(zhuǎn)換基點(diǎn)

改變?cè)鼗c(diǎn)的位置transform-origin

他的主要作用就是讓我們?cè)谶M(jìn)行transform動(dòng)作之前可以改變?cè)氐幕c(diǎn)位置。

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

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

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