Transform屬性

• 概念：CSS3的變形屬性，讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形。
  這個(gè)屬性包含一系列變形函數(shù)，可以移動(dòng)，旋轉(zhuǎn)和縮放元素。
• 語法：transform: none | <transform-function> [<transform-function>]*
• 默認(rèn)值：transform: none

2D轉(zhuǎn)換

旋轉(zhuǎn)：rotate()

• 概念：通過指定的角度參數(shù)對元素指定一個(gè)2D rotation(2D 旋轉(zhuǎn))
• 語法：transform: rotate(<angle>)
• 參數(shù)：angle指旋轉(zhuǎn)角度，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)
• 補(bǔ)充：坐標(biāo)原點(diǎn)是元素的中心，也就是說圍繞元素的中心點(diǎn)旋轉(zhuǎn)

.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
<div class="pic pic1"><img src="images/1.jpg"><p>2D轉(zhuǎn)換</p></div>

移動(dòng)：translateX()，translateY()，translate()

根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)
坐標(biāo)原點(diǎn)是元素的左上角，也就是說，以左上角為原點(diǎn)偏移

div > img {
    transform: translateX(200px);  // 水平方向(X軸)從左到右移動(dòng)200px
    transform: translateY(200px);  // 垂直方向(Y軸)從上到下移動(dòng)200px

    transform: translate(200px, 100px);
    // 水平方向(X軸)從左到右移動(dòng)200px，垂直方向(Y軸)從上到下移動(dòng)100px，同時(shí)移動(dòng)

    transform:translate(200px);    //相當(dāng)于 translate(200px,0)
}

縮放：scaleX()，scaleY()，scale()

指定對象的2D 縮放
坐標(biāo)原點(diǎn)是元素的中心，也就是說，以元素中心為原點(diǎn)縮放

div > img {
    transform: scaleX(.6);     // 水平方向(X軸)縮放成原來的0.6倍
    transform: scaleY(.6);     // 垂直方向(Y軸)縮放成原來的0.6倍

    transform: scale(.6, .6);
    // 水平方向(X軸)縮放成原來的0.6倍，垂直方向(Y軸)縮放成原來的0.6倍，同時(shí)縮放

    transform:scale(.6);       // 相當(dāng)于scale(.6, .6)
}

扭曲：skewX()，skewY()，skew()

指定對象的斜切扭曲
skewX：正值表示逆時(shí)針，負(fù)值表示順時(shí)針
skewY：正值表示順時(shí)針，負(fù)值表示逆時(shí)針
坐標(biāo)原點(diǎn)是元素的中心，也就是說，以元素中心為原點(diǎn)斜切扭曲
有效值的范圍是-90deg ~ 90deg

div > img {
    transform: skewX(15deg);    // 按逆時(shí)針15度沿X軸指定一個(gè)斜切扭曲。X軸的兩條邊會移動(dòng)
    transform: skewY(15deg);    // 按順時(shí)針15度沿Y軸指定一個(gè)斜切扭曲。Y軸的兩條邊會移動(dòng)

    transform: skew(15deg, 15deg);
    // 按逆時(shí)針15度沿X軸指定一個(gè)斜切扭曲，按順時(shí)針15度沿Y軸指定一個(gè)斜切扭曲，同時(shí)斜切扭曲

    transform: skew(15deg);     // 相當(dāng)于skew(15deg，0)
}

3D轉(zhuǎn)換

所有轉(zhuǎn)換都以幾何中心為原點(diǎn)操作

旋轉(zhuǎn)：rotateX()，rotateY()，rotateZ()，rotate3d()

正值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)

div > img {
    transform: rotateX(45deg);
    // 以X軸為中心順時(shí)針旋轉(zhuǎn)45度，想象一下人在單杠上旋轉(zhuǎn)

    transform: rotateY(45deg);
    // 以Y軸為中心順時(shí)針旋轉(zhuǎn)45度，想象一下翻書

    transform: rotateZ(45deg);
    // 以Z軸為中心順時(shí)針旋轉(zhuǎn)45度，想象一下烤羊肉串的時(shí)候，旋轉(zhuǎn)羊肉串

    // rotate3d(x, y, z, angle);
    // x/y/z的取值：0無效，非0有效，取值精度為0.01
    // 參數(shù)不允許省略

    transform: rotate3d(1, 0, 0, 45deg);   // 第一種寫法
    transform: rotate3d(-1, 0, 0, 45deg);  // 第二種寫法
    transform: rotate3d(.5, 0, 0, 45deg);  // 第三種寫法
    // 以上三種寫法的效果是一樣的，以X軸為中心順時(shí)針旋轉(zhuǎn)45度，Y軸，Z軸不動(dòng)
    // 當(dāng)x/y/z中只設(shè)定一個(gè)值的情況下，非0都代表有效的意思，所以這種情況建議第一種寫法

    transform: rotate3d(1, 1, 1, 45deg);
    // 以X軸，Y軸，Z軸為中心，分別順時(shí)針旋轉(zhuǎn)45度

    transform:rotate3d(.5, 1, 1, 45deg);
    // 以X軸為中心順時(shí)針旋轉(zhuǎn)22.5度，以Y軸，Z軸為中心順時(shí)針旋轉(zhuǎn)45度
    // 在設(shè)定多值的情況下，X軸的.5是有意義的，代表旋轉(zhuǎn)角度的0.5倍

    transform:rotate3d(-1, -1, -1, 45deg);
    // 以X軸，Y軸，Z軸為中心，分別逆時(shí)針旋轉(zhuǎn)45度
}

移動(dòng)：translateZ()，translate3d()

// translateZ(z)，指定對象Z軸的平移，通常用于遮罩
div > img {
    transform: translateZ(200px);
}

// translate3d(x, y, z)，指定對象的3D位移
// 參數(shù)不允許省略
div > img {
    transform: translate3d(200px, 200px, 200px);
}

縮放：scaleZ()，scale3d()

// scaleZ(z)，指定對象Z軸的縮放
// 相當(dāng)于厚度變薄
div > img {
    transform: scaleZ(.5);  // 厚度變?yōu)樵瓉淼?.5倍
}

// scale3d(x,y,z)，指定對象的3D縮放
// 參數(shù)不允許省略
div > img {
    transform: scale3d(.5, .5, .5);
}

Transform與坐標(biāo)系統(tǒng)

• 概念：transform-origin屬性允許你更改轉(zhuǎn)換元素的位置，也就是允許你設(shè)置原點(diǎn)
• 語法：transform-origin: x-axis y-axis z-axis;

// 設(shè)置原點(diǎn)為左上角，也就是以左上角為中心順時(shí)針旋轉(zhuǎn)45度
div > img {
    transform: rotate(45deg);
    transform-origin: left top;
}

// 設(shè)置X軸25%位置的點(diǎn)為原點(diǎn)，圍繞這個(gè)原點(diǎn)順時(shí)針旋轉(zhuǎn)45度
div > img {
    transform: rotate(45deg);
    transform-origin: 25% top;
}

擴(kuò)展屬性

transform-style屬性

• 概念：指定嵌套元素是怎樣在三維空間中呈現(xiàn)
• 語法：transform-style: flat(默認(rèn)) | preserve-3d
• 參數(shù)：preserve-3d，可以呈現(xiàn)出3D環(huán)繞的效果
• 補(bǔ)充：由于此屬性是指定嵌套元素的呈現(xiàn)效果，所以要設(shè)置在父元素上

div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

perspective屬性

• 概念：指定觀察者與[z=0]平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果
• 語法：perspective: number | none(默認(rèn));
• 補(bǔ)充：值越小，觀察者與屏幕越近，值越大，觀察者與屏幕越遠(yuǎn)

// 不允許設(shè)置負(fù)值
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    perspective: 500px;
}

perspective-origin屬性

• 概念：指定透視點(diǎn)的位置，也就是說，從哪個(gè)地方看3D模型
• 語法：perspective-origin: x-axis y-axis;
• 參數(shù)：默認(rèn)50% 50%

div { position: relative; width: 760px; height: 760px; margin: auto;
    transform-style: preserve-3d;
    perspective: 500px;
    perspective-origin: bottom; // top | bottom | center
    // bottom：仰視圖，top：俯視圖，center：平視圖
}

backface-visibility屬性

• 概念：指定元素背面面向用戶時(shí)是否可見
• 語法：backface-visibility: visible(默認(rèn)) | hidden
• 補(bǔ)充：
  想象一下我們把內(nèi)容寫在一張玻璃上，當(dāng)玻璃翻轉(zhuǎn)過來的時(shí)候，我們可以看到反著的內(nèi)容。
  如果這張玻璃是毛玻璃呢，那翻轉(zhuǎn)過來我們什么也看不到。

div > .inner{
    backface-visibility: hidden;
}