2D與3D

前言

說到2d與3d的轉(zhuǎn)換,到底什么是2d艇炎,什么又是3d补憾,看下圖:

坐標(biāo)

所謂的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.png

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變大了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末踏志,一起剝皮案震驚了整個(gè)濱河市阀捅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌针余,老刑警劉巖饲鄙,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異圆雁,居然都是意外死亡忍级,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門摸柄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颤练,“玉大人,你說我怎么就攤上這事驱负∴戮粒” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵跃脊,是天一觀的道長宇挫。 經(jīng)常有香客問我,道長酪术,這世上最難降的妖魔是什么器瘪? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮绘雁,結(jié)果婚禮上橡疼,老公的妹妹穿的比我還像新娘。我一直安慰自己庐舟,他們只是感情好欣除,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挪略,像睡著了一般历帚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上杠娱,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天挽牢,我揣著相機(jī)與錄音,去河邊找鬼摊求。 笑死禽拔,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播奏赘,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼寥闪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了磨淌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤凿渊,失蹤者是張志新(化名)和其女友劉穎梁只,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體埃脏,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡搪锣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了彩掐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片构舟。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖堵幽,靈堂內(nèi)的尸體忽然破棺而出狗超,到底是詐尸還是另有隱情,我是刑警寧澤朴下,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布努咐,位于F島的核電站,受9級特大地震影響殴胧,放射性物質(zhì)發(fā)生泄漏渗稍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一团滥、第九天 我趴在偏房一處隱蔽的房頂上張望竿屹。 院中可真熱鬧,春花似錦灸姊、人聲如沸拱燃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽扼雏。三九已至,卻和暖如春夯膀,著一層夾襖步出監(jiān)牢的瞬間诗充,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工诱建, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蝴蜓,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像茎匠,于是被迫代替她去往敵國和親格仲。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 2d變形transform: none | transform-function1.rotate(角度)Rotat...
    奶瓶SAMA閱讀 206評論 0 0
  • CSS里transform變形這個(gè)屬性有點(diǎn)學(xué)習(xí)難度诵冒,尤其在CSS3里加上了3D效果之后凯肋,2維變3維學(xué)習(xí)成本更是成倍...
    張歆琳閱讀 27,898評論 5 81
  • 看了很多視頻、文章汽馋,最后卻通通忘記了侮东,別人的知識(shí)依舊是別人的,自己卻什么都沒獲得豹芯。此系列文章旨在加深自己的印象悄雅,因...
    DCbryant閱讀 1,868評論 0 4
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,640評論 0 7
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color铁蹈,font宽闲,text-align,li...
    love2013閱讀 2,316評論 0 11