Transition&transform“變形”中的HTML

一圆裕、transition過渡

? ? 1.1、transition-property:all;

? ? ? ? ? ? ?指定可以過渡的屬性值互例,默認(rèn)的值為all.當(dāng)然我們也可以設(shè)置具體的值。例如:transition-property: width绑雄;指該元素的width是要過渡的屬性,我們也可以設(shè)置多個屬性奥邮。transition-property:width万牺,height;多個屬性之間用逗號隔開洽腺。

? ? 1.2脚粟、transition-duration:0s;

? ? ? ? ? ? ?指屬性過度所需要的時間,單位是秒蘸朋,其默認(rèn)值是0s核无;結(jié)合1.1可知,transition-property:width藕坯;transition-duration:2s团南;表示該元素的寬度過渡所需要的時間為2s噪沙。

? ? 1.3、transition-timing-function:ease吐根;

? ? ? ? ? ? ?過渡動畫的類型正歼。默認(rèn)值為ease。當(dāng)然transition-timing-function的屬性不知這么多拷橘。如下圖所示局义,ease:表示先慢-快-慢,linear:表示勻速進(jìn)行冗疮,ease-in:表示先快-慢萄唇,ease-out:表示先慢-快,ease-in-out:表示先慢-快-慢术幔。


? ? ? ? ? ? ? 最最關(guān)鍵的有一個cubic-bezier曲線穷绵,在Chrome檢查里面,點(diǎn)擊tran里面的cubic-bezier會出現(xiàn)下圖所示的樣式特愿,在這里我們可以把曲線弄成我們想要的樣式仲墨。圖形最上面的小球的運(yùn)動軌跡就是當(dāng)前我們調(diào)試的cubic-bezier曲線的運(yùn)動軌跡。然后將下面的數(shù)值復(fù)制到我們的代碼中就可以了揍障。


二目养、transform變形

? ? 2.1、transform:translate()毒嫡;位移或者變形癌蚁。

? ? ? ? ? ?2.1.1、transform:translateX(length)兜畸;表示當(dāng)前元素沿著X軸移動length長度的距離努释。當(dāng)length為正值時表示沿著X軸正方形移動,length為負(fù)值時表示沿著X軸的負(fù)方向移動咬摇。

? ? ? ? ? 2.1.2伐蒂、transform:translateY (length);表示當(dāng)前元素沿著 Y軸移動length長度的距離肛鹏。當(dāng)length為正值時表示沿著 Y軸正方形移動逸邦,length為負(fù)值時表示沿著 Y軸的負(fù)方向移動。

? ? ? ? ? 2.1.3在扰、transform:translate (length缕减,length);表示當(dāng)前元素沿著 X芒珠,Y軸移動length長度的距離桥狡。當(dāng)length為正值時表示沿著X,Y軸正方形移動,length為負(fù)值時表示沿著X,Y軸的負(fù)方向移動。注意:當(dāng)transform:translate (length)裹芝;只有一個值時呈宇,默認(rèn)表示在X軸上移動。

? ? 2.2局雄、transform: scale()甥啄;縮放(適應(yīng)于設(shè)置小于12px的字體大小)

? ? ? ? ? 2.2.1炬搭、transform: scaleX(數(shù)值)蜈漓;表示在X軸方向上進(jìn)行縮放。數(shù)值可以是整數(shù)可以是負(fù)值宫盔,當(dāng)然也可以是小數(shù)融虽。默認(rèn)值為1;

? ? ? ? ? 2.2.2灼芭、transform: scale Y(數(shù)值)有额;表示在 Y軸方向上進(jìn)行縮放。數(shù)值可以是整數(shù)可以是負(fù)值彼绷,當(dāng)然也可以是小數(shù)巍佑。默認(rèn)值為1;

? ? ? ? ? 2.2.3寄悯、transform: scale(數(shù)值萤衰,數(shù)值);表示在X猜旬,Y軸方向上進(jìn)行縮放脆栋。數(shù)值可以是整數(shù)可以是負(fù)值,當(dāng)然也可以是小數(shù)洒擦。默認(rèn)值為1椿争;與tran所不同的是,scale設(shè)置一個屬性值時熟嫩,表示X軸Y軸上都生效秦踪。

? ? 2.3、transform:rotate()旋轉(zhuǎn)

? ? ? ? ? 2.3.1邦危、transform:rotateX(deg)洋侨;表示該元素在X軸上進(jìn)行旋轉(zhuǎn),當(dāng)deg為正時倦蚪,代表沿著順時針旋轉(zhuǎn),為負(fù)值使表示逆時針旋轉(zhuǎn)边苹。

? ? ? ? ? 2.3.2陵且、transform:rotate Y(deg);表示該元素在 Y軸上進(jìn)行旋轉(zhuǎn),當(dāng)deg為正時慕购,代表沿著順時針旋轉(zhuǎn)聊疲,為負(fù)值使表示逆時針旋轉(zhuǎn)。

? ? ? ? ? 2.3.3沪悲、transform:rotate(deg)获洲;表示該元素在 Z軸上進(jìn)行旋轉(zhuǎn),當(dāng)deg為正時殿如,代表沿著順時針旋轉(zhuǎn)贡珊,為負(fù)值使表示逆時針旋轉(zhuǎn)。

? ? 2.4涉馁、transform:skew() 傾斜 (適應(yīng)于制作平行四邊形)

? ? ? ? ? 2.4.1门岔、transform:skewX(deg);表示該元素沿著X軸進(jìn)行傾斜烤送,當(dāng)deg為正值時寒随,會逆時針傾斜,為負(fù)值時帮坚,沿著順時針傾斜妻往。

? ? ? ? ? 2.4.1、transform:skew Y(deg)试和;表示該元素沿著 Y軸進(jìn)行傾斜蒲讯,當(dāng)deg為正值時,會逆時針傾斜灰署,為負(fù)值時判帮,沿著順時針傾斜。

? ? ? ? ? 2.4.1溉箕、transform:skew (deg,deg)晦墙;表示該元素沿著X軸 Y軸進(jìn)行傾斜,當(dāng)deg為正值時肴茄,會逆時針傾斜晌畅,為負(fù)值時,沿著順時針傾斜寡痰。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抗楔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子拦坠,更是在濱河造成了極大的恐慌连躏,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贞滨,死亡現(xiàn)場離奇詭異入热,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門勺良,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绰播,“玉大人,你說我怎么就攤上這事尚困〈缆幔” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵事甜,是天一觀的道長谬泌。 經(jīng)常有香客問我,道長讳侨,這世上最難降的妖魔是什么呵萨? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮跨跨,結(jié)果婚禮上潮峦,老公的妹妹穿的比我還像新娘。我一直安慰自己勇婴,他們只是感情好忱嘹,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著耕渴,像睡著了一般拘悦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上橱脸,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天础米,我揣著相機(jī)與錄音,去河邊找鬼添诉。 笑死屁桑,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的栏赴。 我是一名探鬼主播蘑斧,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼须眷!你這毒婦竟也來了竖瘾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤花颗,失蹤者是張志新(化名)和其女友劉穎捕传,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捎稚,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡乐横,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年求橄,在試婚紗的時候發(fā)現(xiàn)自己被綠了今野。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片葡公。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖条霜,靈堂內(nèi)的尸體忽然破棺而出催什,到底是詐尸還是另有隱情,我是刑警寧澤宰睡,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布蒲凶,位于F島的核電站,受9級特大地震影響拆内,放射性物質(zhì)發(fā)生泄漏旋圆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一麸恍、第九天 我趴在偏房一處隱蔽的房頂上張望灵巧。 院中可真熱鬧,春花似錦抹沪、人聲如沸刻肄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽敏弃。三九已至,卻和暖如春噪馏,著一層夾襖步出監(jiān)牢的瞬間麦到,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工欠肾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瓶颠,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓董济,卻偏偏與公主長得像步清,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子虏肾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

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

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color廓啊,font,text-align封豪,li...
    love2013閱讀 2,318評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color谴轮,font,text-align吹埠,li...
    wzhiq896閱讀 1,762評論 0 2
  • transform廓推、transition、animation分別代表著轉(zhuǎn)換翩隧、過渡以及動畫樊展。從各自的名字我們就可以大...
    Ginkela閱讀 3,826評論 0 12
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,640評論 0 7
  • 關(guān)于css3變形 CSS3變形是一些效果的集合堆生,比如平移专缠、旋轉(zhuǎn)、縮放和傾斜效果淑仆,每個效果都被稱作為變形函數(shù)(Tra...
    hopevow閱讀 6,339評論 2 13