CSS3中2D和3D的轉(zhuǎn)換

CSS3 轉(zhuǎn)換:

?CSS3轉(zhuǎn)換,我們可以移動(dòng),比例化叔遂,反過(guò)來(lái)症歇,旋轉(zhuǎn),和拉伸元素唠摹。


2D轉(zhuǎn)換方法:

  • translate()方法:(位移) 根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù),從當(dāng)前元素位置移動(dòng)。
    ? 例:translate(50px,100px)是從左邊元素移動(dòng)50個(gè)像素晴竞,并從頂部移動(dòng)100個(gè)像素。
  • rotate()方法:(旋轉(zhuǎn))在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素狠半。負(fù)值是允許的颓鲜,這樣是元素逆時(shí)針旋轉(zhuǎn)。
    ? 例:rotate(30deg)元素順時(shí)針旋轉(zhuǎn)30°
  • scale() 方法:(縮放)該元素增加或減少的大小典予,取決于寬度(X軸)和高度(Y軸)的參數(shù)甜滨。
    ? 例:scale(2,4)轉(zhuǎn)變寬度為原來(lái)的大小的2倍,何其原始大小4倍的高度瘤袖。
  • skew()方法:(扭曲)該元素會(huì)根據(jù)橫向(X軸)和垂直(Y軸)線參數(shù)給定角度衣摩。
    ? 例:skew(30deg,20deg)元素在x軸和y軸上傾斜20°和30°
  • matrix()方法:(矩陣) matrix方法有六個(gè)參數(shù),包含旋轉(zhuǎn)捂敌,縮放艾扮,移動(dòng)和傾斜共功能。
    ? 例如:matrix(n,n,n,n,n,n)使用六個(gè)值的矩陣占婉。

transform:適用于2D和3D轉(zhuǎn)換的元素泡嘴。
transform-origin:允許更改轉(zhuǎn)化元素的位置。

3D轉(zhuǎn)換方法:

1.rotateX() 方法:圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素逆济。
2.rotateY()方法:圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素酌予。
3.rotate3d(x,y,z.angle):定義3D轉(zhuǎn)換。
4.scale3d(x,y,z)方法:定義3D縮放轉(zhuǎn)換奖慌。


transform-style:規(guī)定被嵌套元素如何在3D空間中顯示抛虫。
perspective:規(guī)定3D元素的透視效果。
perspective-origin:規(guī)定3D元素的底部位置简僧。
backface-visibility :定義元素在不面對(duì)屏幕時(shí)是否可見(jiàn)建椰。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市岛马,隨后出現(xiàn)的幾起案子棉姐,更是在濱河造成了極大的恐慌屠列,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伞矩,死亡現(xiàn)場(chǎng)離奇詭異脸哀,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)扭吁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門撞蜂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人侥袜,你說(shuō)我怎么就攤上這事蝌诡。” “怎么了枫吧?”我有些...
    開(kāi)封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵浦旱,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我九杂,道長(zhǎng)颁湖,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任例隆,我火速辦了婚禮甥捺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘镀层。我一直安慰自己镰禾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布唱逢。 她就那樣靜靜地躺著吴侦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪坞古。 梳的紋絲不亂的頭發(fā)上备韧,一...
    開(kāi)封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音痪枫,去河邊找鬼织堂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛听怕,可吹牛的內(nèi)容都是我干的捧挺。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼尿瞭,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了翅睛?” 一聲冷哼從身側(cè)響起声搁,我...
    開(kāi)封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤黑竞,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后疏旨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體很魂,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年檐涝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了遏匆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谁榜,死狀恐怖幅聘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情窃植,我是刑警寧澤帝蒿,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站巷怜,受9級(jí)特大地震影響葛超,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜延塑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一绣张、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧关带,春花似錦胖替、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至好芭,卻和暖如春燃箭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舍败。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工招狸, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人邻薯。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓裙戏,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親厕诡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子累榜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

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

  • 1.Css32D轉(zhuǎn)換(translate,rotate,scale壹罚,skew葛作,matrix) 轉(zhuǎn)換方法: 1.tr...
    小本YuDL閱讀 283評(píng)論 0 0
  • CSS3 2D 轉(zhuǎn)換 CSS3 轉(zhuǎn)換CSS3轉(zhuǎn)換,我們可以移動(dòng)猖凛,比例化赂蠢,反過(guò)來(lái),旋轉(zhuǎn)辨泳,和拉伸元素虱岂。 它是如何工作?...
    hx永恒之戀閱讀 596評(píng)論 0 2
  • 沒(méi)有什么是一帆風(fēng)順的菠红,時(shí)刻做好倒下的準(zhǔn)備第岖! 1、模仿天天動(dòng)聽(tīng) https://github.com/ashen-z...
    Ashen閱讀 767評(píng)論 0 13
  • 年年月月日日 歲歲華華暮暮 情情念念思思 卿卿您您我我 時(shí)間過(guò)的總是那么快途乃,歲月流逝總是那么的匆忙绍傲,記憶中的印象開(kāi)...
    小睿貍閱讀 258評(píng)論 0 1