導(dǎo)讀
- 相關(guān)單詞
- 坐標(biāo)軸
- transform屬性(translate() scale() rotate() skew())
- perspective
- perspective-origin
相關(guān)單詞
- transform 變換、轉(zhuǎn)換、變形
- origin：起源、源頭
- perspective： 透視
- translate： 移動(dòng)（本意是翻譯）
- scale: 縮放
- rotate： 旋轉(zhuǎn)
- skew: 傾斜、斜切
坐標(biāo)軸
3d_axes.jpg
- x軸：水平軸俩垃。
- y軸：垂直軸。
- z軸：垂直于屏幕的軸。
transform屬性
定義：transform屬性定義元素的變換熙卡。允許您對元素進(jìn)行移動(dòng)、旋轉(zhuǎn)励饵、縮放和傾斜變換驳癌。
| 屬性 | 描述 | 屬性值 |
|---|---|---|
| transform | 向元素應(yīng)用變換。 | translate(),scale(),rotate(),skew() |
| transform-origin | 設(shè)置變換元素的位置役听。 | length,left,center,right,top,bottom |
| transform-style | 設(shè)置元素的變換風(fēng)格颓鲜。包括2D和3D兩種風(fēng)格 | flat, preserve-3d |
| perspective | 設(shè)置是否開啟透視 | none, length |
| perspective-origin | 設(shè)置透視源（視角位置） | left,top,bottom,right,length |
| backface-visibility | 定義元素在不面對屏幕時(shí)是否可見表窘。 |
translate()
定義：translate()函數(shù)用于對元素進(jìn)行移動(dòng)變換。
語法
div{
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
}
屬性值：
- 可使用任何長度值：px % em rem vh vw
- 屬性值數(shù)量由函數(shù)決定：1 - 3 個(gè)
用法：
- 當(dāng)子元素translateZ(100px)看不到時(shí)：可通過為父元素添加transform: rotate3d(1,1,1,45deg)查看子元素的移動(dòng)效果甜滨，也可通過perspective屬性添加景深查看子元素移動(dòng)效果乐严。
scale()
定義：scale()函數(shù)用于對元素進(jìn)行縮放變換。
語法
div{
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
}
屬性值：
- 數(shù)值在[-1, 1]內(nèi)表示收縮,-0.5等同于0.5衣摩，否則表示放大昂验。
- 屬性值數(shù)量由函數(shù)決定：1 - 3 個(gè)
rotate()
定義：rotate()函數(shù)用于對元素進(jìn)行旋轉(zhuǎn)變換。
語法
div{
transform: rotate(0.5turn); /* 效果等同于 rotateZ(45deg) */
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d(x, y, z, 10deg);
}
屬性值：
- deg: 表示旋轉(zhuǎn)角度艾扮。正值表示順時(shí)針旋轉(zhuǎn)既琴，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。
- turn: 表示旋轉(zhuǎn)圈數(shù)泡嘴。0.5表示1/4圈甫恩，1表示半圈，2表示1圈酌予。
- rotate3d() 創(chuàng)建的旋轉(zhuǎn)量由x,y,z三個(gè)數(shù)值和一個(gè)角度指定磺箕。
用法：
- rotate() ：當(dāng)子元素rotate(90deg)看不到時(shí)：可旋轉(zhuǎn)父元素以查看子元素的旋轉(zhuǎn)效果。
- rotate()效果等同于rotateZ()
skew()
定義：skew()函數(shù)用于對元素進(jìn)行斜切變換霎终。
語法
div{
transform: skew(30deg, 20deg);
transform: skew(10deg); /* 效果等同于skewX(10deg) */
transform: skewX(30deg);
transform: skewY(1.07rad);
}
屬性值
- deg：表示斜切的角度
- 默認(rèn)值：0
- rad：表示半徑
transform-style
定義：
transform-origin
定義：指定原點(diǎn)的位置滞磺。默認(rèn)情況下，它位于元素的中心并且可以移動(dòng)莱褒。它被需要特定點(diǎn)作為參數(shù)的多種變換使用击困，例如旋轉(zhuǎn)、縮放或傾斜广凸。
示例：圖片以bottom left為原點(diǎn)順時(shí)針旋轉(zhuǎn)了90度
<img
style="rotate: 90deg;
transform-origin: bottom left;"
src="logo.png"
alt="MDN Logo" />
perspective
定義：定義z軸原點(diǎn)到屏幕的距離阅茶。開啟3D空間上下文。（Z軸是垂直屏幕的軸）
特征：大透視小變換谅海；小透視大變換脸哀。
語法
父元素{
perspective: none | px | em;
}
屬性值：
- none: 不開啟透視。默認(rèn)值
- 長度值：開啟透視扭吁，并設(shè)置透視距離撞蜂。（最小值是1px）
perspective-origin
定義：要配置的第二個(gè)元素是觀察者的位置，具有 perspective-origin 屬性侥袜。默認(rèn)情況下蝌诡，視角以觀察者為中心，這并不總是足夠的枫吧。
語法
/* One-value syntax */
perspective-origin: x-position;
/* Two-value syntax */
perspective-origin: x-position y-position;
/* When both x-position and y-position are keywords,
the following is also valid */
perspective-origin: y-position x-position;
x 位置: 表示消失點(diǎn)的橫坐標(biāo)位置浦旱。它可以具有以下值之一：
- <length-percentage> 以絕對長度值或相對于元素寬度的形式指示位置。該值可能為負(fù)九杂。
- left颁湖，關(guān)鍵字是 0 長度值的快捷方式宣蠕。
- center，關(guān)鍵字是 50% 百分比值的快捷方式甥捺。
- right抢蚀，關(guān)鍵字是 100% 百分比值的快捷方式。
y 位置
指示消失點(diǎn)的縱坐標(biāo)位置涎永。它可以具有以下值之一：
- <length-percentage> 以絕對長度值或相對于元素高度的形式指示位置思币。該值可能為負(fù)。
- top羡微，關(guān)鍵字是 0 長度值的快捷方式谷饿。
- center，關(guān)鍵字是 50% 百分比值的快捷方式妈倔。
- bottom博投，關(guān)鍵字是 100% 百分比值的快捷方式。
透視
透視指在平面上描繪物體的空間關(guān)系的方法盯蝴。
透視的特點(diǎn)：
- 近大遠(yuǎn)小
- 近快遠(yuǎn)慢
- 近實(shí)遠(yuǎn)虛
