前言
說到2d與3d的轉(zhuǎn)換,到底什么是2d艇炎,什么又是3d补憾,看下圖:
所謂的2d和3d就是我們理解的二維空間和三維空間漫萄,那么什么是二維空間,什么又是三維空間呢盈匾?
二維空間:二維空間就是一個(gè)平面腾务,我們?nèi)粘I钪兴赖亩S坐標(biāo)系,就是用來解讀二維空間的削饵,看圖中有x岩瘦,y,z三個(gè)軸窿撬,我們只需要看X軸和Y軸启昧,而X軸和Y軸所構(gòu)成的就叫做二維坐標(biāo)系,而2d轉(zhuǎn)換就是基于二位坐標(biāo)系變換的
三維空間:三維空間是基于二維空間上又加了一條Z軸劈伴,我們所處的空間就是三維的空間密末,我們學(xué)到的3d轉(zhuǎn)換,就是基于三維坐標(biāo)系的
當(dāng)我們弄懂了什么是2d什么又是3d的時(shí)候跛璧,我們想到什么是變严里,基于2d和3d又是怎樣的變法;
一追城、2D形變:transform
2d形變共有4個(gè)屬性:
translate(位移)
rotate(旋轉(zhuǎn))
scale(縮放)
skew(傾斜)
1.1 translate
在2D形變中刹碾,位移translate有兩個(gè)參數(shù),就是沿著x座柱,y軸位移的距離迷帜。
.box{
transform:translate(100px,100px);
}
.box{
transform:translateX(100px);
}
.box{
transform:translateY(100px);
}
.box{
transform:translate(100px);
}
以上設(shè)置的四個(gè)樣式物舒,它們的表現(xiàn)形式分別是,第一個(gè)元素向右向下各移動(dòng)100px戏锹,第二個(gè)元素向右移動(dòng)100px冠胯,第三個(gè)元素向下移動(dòng)了100px,第四個(gè)元素向右移動(dòng)了100px景用,translate不指定方向的時(shí)候設(shè)置一個(gè)值只會(huì)對x軸生效涵叮;
1.2 rotate
在2D形變中,rotate有一個(gè)參數(shù)伞插,就是旋轉(zhuǎn)的角度割粮,注意這里的旋轉(zhuǎn)是順時(shí)針的。
.box{
transform:rotate(45deg);
}
.box{
transform:rotate(-45deg);
}
上面的代碼設(shè)置以后媚污,第一個(gè)元素會(huì)順時(shí)針旋轉(zhuǎn)45度舀瓢,第二個(gè)逆時(shí)針旋轉(zhuǎn)45度;
1.3 scale
在2D形變中耗美,scale有兩個(gè)參數(shù)京髓,就是沿著x,y軸縮放的比例商架,這個(gè)值小于1代表縮小堰怨。
.box{
transform:scaleX(2);
}
.box{
transform:scaleY(0.5);
}
.box{
transform:scale(1.5);
}
上面的代碼表示,第一個(gè)元素沿著X軸的方向會(huì)放大兩倍蛇摸,也就是寬度放大兩倍备图,第二個(gè)元素沿著Y軸放大0.5倍也就是高度縮小兩倍,第三個(gè)元素整體放大1.5倍赶袄;
1.4 skew
這個(gè)屬性是2d形變中的屬性揽涮,所以只有兩個(gè)參數(shù),分別表示沿著x軸和y軸的2d傾斜角度饿肺;這個(gè)屬性需要注意是蒋困,在傾斜的時(shí)候,元素里的文字也會(huì)跟著傾斜敬辣。
二雪标、3D形變
3d形變有三個(gè)屬性:
translate
scale
rotate
是不是和2d形變差不多呢?是的溉跃,兩者差別不大汰聋,但是3d多了很多2d沒有的東西。
首先我們要知道幾個(gè)概念:
景深:perspective:屬性包括兩個(gè)屬性:none和具有單位的長度值喊积。其中perspective屬性的默認(rèn)值為none,表示無限的角度來看3D物體玄妈,但看上去是平的乾吻。另一個(gè)值<length>
接受一個(gè)長度單位大于0的值髓梅。而且其單位不能為百分比值。<length>
值越大绎签,角度出現(xiàn)的越遠(yuǎn)枯饿,從而創(chuàng)建一個(gè)相當(dāng)?shù)偷膹?qiáng)度和非常小的3D空間變化。反之诡必,此值越小奢方,角度出現(xiàn)的越近,從而創(chuàng)建一個(gè)高強(qiáng)度的角度和一個(gè)大型3D變化爸舒。
比如你站在10英尺和1000英尺的地方看一個(gè)10英尺的立方體蟋字。在10英尺的地方,你距離立方體是一樣的尺寸扭勉。因此視角轉(zhuǎn)變遠(yuǎn)遠(yuǎn)大于站在1000英尺處的鹊奖,立體尺寸是你距離立方體距離的百分之一。同樣的思維適用perspective的<length>值;
這上面說的一堆不知道是不是人話涂炎,我理解的景深就是你的眼睛距離屏幕的大兄揖邸;
transform-style:preserve-3d唱捣;屬性是3D空間一個(gè)重要屬性两蟀,表示所有子元素在3D空間中呈現(xiàn)。
視覺中心點(diǎn):指的是我們的視野在一個(gè)平面中的中心點(diǎn)震缭,在3d轉(zhuǎn)換中赂毯,視覺中心點(diǎn)是可以控制的。
perspective-origin:center center;(默認(rèn)值)
可以設(shè)置x方向和y方向蛀序,單位可以是px百分比 top center bottom right left
旋轉(zhuǎn)中心點(diǎn):
transform-origin:center center 0;(默認(rèn)值)
前面我們寫過xy方向上的欢瞪,今天多了一個(gè)z軸,第三個(gè)值就是z軸默認(rèn)值是0徐裸;
2.1 translate
3d中遣鼓,位移多了一個(gè)方向,z軸的方向重贺,translateZ(100px)表示元素向Z軸移動(dòng)100px骑祟;
2.2rotate
在2d中旋轉(zhuǎn)是只有繞著中心點(diǎn)旋轉(zhuǎn)的,在3d中多了x軸和y軸气笙,其中次企,箭頭指向我們的順時(shí)針是正的,逆時(shí)針是負(fù)的潜圃;
2.3scale
縮放也是在2d的基礎(chǔ)上加了一個(gè)在z軸上縮放缸棵,這里主要聲明一下z軸的縮放:
在z軸上的縮放,我理解的是谭期,把z軸方向的空間密度改變了堵第,如果同樣是100px 在scaleZ(2)的基礎(chǔ)上吧凉,100px同樣是100px這個(gè)數(shù)據(jù)但是100px變大了。