亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS3 transform 詳解

wing324 / 2723人閱讀

摘要：最近在做，發(fā)現(xiàn)還是對了解的不是特別深刻，這里做一個總結(jié)。是以當(dāng)前元素的中心為重心旋轉(zhuǎn)順時針開始。就是普通的狀態(tài)將會倒置含義傾斜單位用法以自身元素為基礎(chǔ)值為正數(shù)時向右傾斜值為負(fù)數(shù)時向左傾斜特殊值視覺上元素消失。

最近在做H5，發(fā)現(xiàn)還是對transform了解的不是特別深刻，這里做一個總結(jié)。

CSS3 transform

transform的含義是：改變，使…變形；轉(zhuǎn)換

CSS3 transform都有哪些常用屬性 
rotate()
// 旋轉(zhuǎn)

skew()
// 傾斜

scale()
// 縮放

translate(,)
// 變動, 位移

transform:rotate()：

含義：旋轉(zhuǎn)；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
是以當(dāng)前元素的中心為重心,旋轉(zhuǎn)順時針開始。0deg就是普通的狀態(tài),180deg將會倒置

transform : skew()：

含義：傾斜
單位:deg
用法:以自身元素為基礎(chǔ),值為正數(shù)時向右傾斜skew(44deg),值為負(fù)數(shù)時向左傾斜(-44deg)
特殊值:-90deg,90deg,視覺上元素消失。180deg,-180deg恢復(fù)。一次類推。

transform:scale()：

含義：比例
單位：無
用法: 值為正數(shù)且value>1時按照數(shù)值比例放大transform:scale(1.5)，
值為正數(shù)且0時按照數(shù)值比例縮小transform:scale(0.5),
值為負(fù)數(shù)時：-1< value <0 時,同樣縮小|value|并且rotate(180deg),
值為負(fù)數(shù)時:value < -1時，放大|value|并且rotate(180deg)

transform:translate(x,y)：

含義: 變動，位移
單位: px(rem)
用法: 把目標(biāo)元素中點理解為平面坐標(biāo)系的(0px,0px)，所有的操作全部基于(0,0)起始點。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115366.html

相關(guān)文章

  • css3動畫屬性詳解之transform、transition、animation

    摘要：動畫屬性詳解關(guān)于制作動畫的幾個屬性變形轉(zhuǎn)換和動畫。一屬性旋轉(zhuǎn)中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉(zhuǎn)其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解： 關(guān)于CSS3制作動畫的幾個屬性：變形(transform)、轉(zhuǎn)換(transition)和動畫(animation)。 一、transform 屬性： 旋轉(zhuǎn)rotate（中...

    Riddler 評論0 收藏0

  • 「CSS3 」動畫詳解

    摘要：規(guī)定動畫的名稱。規(guī)定動畫是否在下一周期逆向地播放。定義動畫各個階段的狀態(tài)的代碼段。動畫的周期時間。動畫的循環(huán)次數(shù)。動畫完成后，元素保持動畫最后的狀態(tài)。重要提示請不要忘記推薦和收藏搜索動畫詳解 CSS3 提供給了我們非常多的轉(zhuǎn)換函數(shù)： 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew...

    weij 評論0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

    摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。有的同學(xué)說，用不是能畫得更逼真而且更簡單嗎這點我也非常贊同，但我的理由還是，那就沒意思了。這次寫的詳細(xì)一點，把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。那就沒意思了。有的同學(xué)說，用c...

    Codeing_ls 評論0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

    摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。有的同學(xué)說，用不是能畫得更逼真而且更簡單嗎這點我也非常贊同，但我的理由還是，那就沒意思了。這次寫的詳細(xì)一點，把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。那就沒意思了。有的同學(xué)說，用c...

    mayaohua 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<