1. 新的背景

背景在CSS3中也得到很大程度的增強(qiáng)，比如背景圖片尺寸、背景裁切區(qū)域、背景定位參照點(diǎn)、多重背景等。

1.1 background-size設(shè)置背景圖片的尺寸

• cover會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終填充滿(mǎn)背景區(qū)域，如有溢出部分則會(huì)被隱藏。
• contain會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。
• 也可以使用長(zhǎng)度單位或百分比，可以是兩個(gè)值第一個(gè)是水平方向第二個(gè)是垂直方向。

.box {
  width: 300px;
  height: 200px;
  border: 1px solid;
  background-image: url(./img/1.jpg);
  /* background-size: cover; */
  /* background-size: auto; */
  /* background-size: auto 40px; */
  /* 水平方向50%，垂直方向40像素高 */
  background-size: 50% 40px;
  background-size: contain;
  background-repeat: no-repeat;
}

1.2 background-origin設(shè)置背景定位的原點(diǎn)

語(yǔ)法：

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

• border-box以邊框做為參考原點(diǎn)；
• padding-box以?xún)?nèi)邊距做為參考原點(diǎn)；
• content-box以?xún)?nèi)容區(qū)做為參考點(diǎn)；

注意：當(dāng)使用 background-attachment 為fixed時(shí)，該屬性將被忽略不起作用。

1.3 background-clip設(shè)置背景區(qū)域裁切

語(yǔ)法：

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

• border-box裁切邊框以?xún)?nèi)為背景區(qū)域；
• padding-box裁切內(nèi)邊距以?xún)?nèi)為背景區(qū)域；
• content-box裁切內(nèi)容區(qū)做為背景區(qū)域；

1.4 多背景圖的應(yīng)用

在設(shè)置css的background的圖片的時(shí)候，可以設(shè)置多個(gè)背景圖，背景圖之間用逗號(hào)隔開(kāi)。而且背景圖可以用線性漸變代替。

.box {
  background: linear-gradient(to right, transparent, red),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

上課代碼

 .box {
  width: 300px;
  height: 300px;
  border: 100px solid rgba(33,33,33,.4);
  background:
    url(../img/border.png) right bottom no-repeat,
    linear-gradient(to right, rgba(0,33,0,.4), rgba(0,0,200, .9)), 
    url(../img/a.jpg) no-repeat;
  /* cover: 鋪滿(mǎn)整個(gè)div */
  background-size: cover;

  /* 把圖片縮放到能完整的顯示整個(gè)背景圖 */
  /* background-size: contain; */
  /* 設(shè)置具體的寬度和高度，可以是百分比或者像素 */
  /* background-size: 200px 50%; */
  padding: 100px;

  /* 背景圖默認(rèn)從padding開(kāi)始進(jìn)行顯示 */

  /* 設(shè)置背景圖從內(nèi)容區(qū)域進(jìn)行顯示 */
  /* background-origin: content-box; */
  /* background-origin: padding-box; */
  background-origin: border-box;
  /* background-clip: padding-box;  */
  background-clip: content-box; 
}

2. 漸變

漸變是CSS3當(dāng)中比較豐富多彩的一個(gè)特性，通過(guò)漸變我們可以實(shí)現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量，并且具有很強(qiáng)的適應(yīng)性和可擴(kuò)展性。
可分為線性漸變、徑向漸變

2.1 線性漸變 linear-gradient

為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓瀏覽器去平滑的過(guò)渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

簡(jiǎn)單線性漸變。linear-gradient()方法，第一個(gè)參數(shù)方向，后面參數(shù)是漸變的顏色，顏色可以是多個(gè)顏色后面可以設(shè)置百分比表示漸變到盒子的位置。

例如：
background: linear-gradient(to bottom, blue, white);

從頂部漸變到底部，顏色由藍(lán)色到白色

background: linear-gradient(to right, red, blue 20%, white);

向右漸變，顏色由紅色漸變到藍(lán)色（20%的位置為藍(lán)色）然后到白色

線性漸變還可以設(shè)置按照某個(gè)角度進(jìn)行漸變，漸變的角度的參考如下圖：

漸變的角度

.box-line {
  color: red;
  width: 200px;
  height: 200px;
  border: 1px solid #089;
  float: left;
  background: linear-gradient(0deg, black, white);
}
.box-line:nth-child(1) {
  background: linear-gradient(90deg, black, white);
}
.box-line:nth-child(2) {
  background: linear-gradient(180deg, black, white);
}
.box-line:nth-child(3) {
  background: linear-gradient(270deg, black, white);
}

角度漸變

漸變還支持顏色的透明度：

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)));

上課代碼

.box {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  /* to left/top/right/bottom: 從X的反方向的位置到具體的X位置。 */
  /* background-image: linear-gradient(to left, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to top, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to bottom, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to right, rgba(33,0,0,.9), rgba(33,0,0,.1)); */

  /* 按照角度進(jìn)行漸變 */
  /* deg：角度， 整圓共360deg */
  /* background: linear-gradient(-45deg, blue, red); */
  /* background: linear-gradient(135deg, blue, red); */
  
  /* 設(shè)置多個(gè)漸變的顏色 */
  background: linear-gradient(45deg, blue, red 50%, yellow 70%, purple);
}

2.2 徑向漸變

徑向漸變使用 radial-gradient 函數(shù)語(yǔ)法. 這個(gè)語(yǔ)法和線性漸變很類(lèi)似, 除了你可以指定漸變結(jié)束時(shí)的形狀 (可能時(shí)一個(gè)圓形或者一個(gè)橢圓形) 以及它的大小. 默認(rèn)來(lái)說(shuō)，結(jié)束形狀是一個(gè)橢圓形并且和容器的大小比例保持一致。

.box {
  /* 像線性漸變一樣，色標(biāo)之間是等間距的 */
  background: radial-gradient(red, yellow, rgb(30, 144, 255));

  /* 橢圓使用最近端的值, 這就意味著從開(kāi)始點(diǎn)(中心點(diǎn))到封閉盒子的最近端的距離來(lái)指定橢圓的尺寸。 */
  background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

  /* 漸變的尺寸為起始點(diǎn)到封閉盒模型最遠(yuǎn)端的起始點(diǎn)的距離。 */
  background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

  /* 指定開(kāi)始點(diǎn)(中心)和最近端的距離為圓的尺寸。 */
  background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

  /*100px的漸變半徑 圓心點(diǎn)坐標(biāo) 50px  50px*/
  background: radial-gradient(100px at 50px 50px, rgba(0,0,255,1), rgba(0,0,255,.5));
}

2.3 重復(fù)漸變

用法跟線性漸變和徑向漸變一直，方法名不一致而已。

重復(fù)線性漸變：

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

重復(fù)徑向漸變：

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

3. 過(guò)渡

過(guò)渡是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過(guò)渡（補(bǔ)間動(dòng)畫(huà)），經(jīng)常用來(lái)制作動(dòng)畫(huà)效果。

語(yǔ)法：transition: <property> <duration> <timing-function> <delay>;

參數(shù)：

• property，要進(jìn)行過(guò)渡動(dòng)畫(huà)的屬性，可以通過(guò)transition-property來(lái)單獨(dú)設(shè)置，如果是all表示所有的都進(jìn)行過(guò)渡動(dòng)畫(huà)。
• duration，動(dòng)畫(huà)間隔時(shí)間，transition-duration 屬性以秒或毫秒為單位指定過(guò)渡動(dòng)畫(huà)所需的時(shí)間。默認(rèn)值為 0s ，表示不出現(xiàn)過(guò)渡動(dòng)畫(huà)。
• timing-function，加速曲線，transition-timing-function 屬性用來(lái)描述這個(gè)中間值是怎樣計(jì)算的。實(shí)質(zhì)上，通過(guò)這個(gè)函數(shù)會(huì)建立一條加速度曲線，因此在整個(gè)transition變化過(guò)程中，變化速度可以不斷改變?？扇≈禐椋?code>ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end、steps(4, end)等。可以參考地址：MDN
• delay，開(kāi)始作用之前需要等待的時(shí)間?？梢杂胻ransition-delay屬性設(shè)置。

例子：

/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

注意：要有過(guò)渡效果，元素的狀態(tài)必須從一個(gè)屬性狀態(tài)到另外一個(gè)屬性狀態(tài)，一般用于js動(dòng)態(tài)修改屬性、css的hover改變?cè)氐膶傩缘葓?chǎng)景。
例如：

.box {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  position: relative;
  transition: all 3s, background-color 3s;
  left: 0;
}
.box:hover {
  border: 1px solid red;
  background-color: rebeccapurple;
  left: 10px;
}

上課代碼

 <style>
    .box {
      transition-delay: 0.5s;
      transition-property: width; /*all 代表對(duì)所有的可以過(guò)渡的屬性應(yīng)用過(guò)渡效果*/
      transition-duration: 0.9s;
      /* transition-timing-function: ease-in; */
      /* transition-timing-function: ease-in-out; */
      transition-timing-function: ease-out;
      /* transition-timing-function: steps(3, end); */
      width: 200px;
      height: 200px;
      border: 1p solid #ccc;
      background-color: #aaa;
    }

    .box:hover {
      width: 300px;
    }
    .box2 {
      width: 200px;
      height: 200px;
      border: 1p solid #ccc;
      background-color: lightblue;
      /* 可過(guò)渡的屬性，過(guò)渡的持續(xù)時(shí)間， 動(dòng)畫(huà)函數(shù)，delay延遲執(zhí)行的時(shí)間*/
      transition: all 1s ease 0.5s; 
    }
    .box2:hover {
      width: 300px;
      height: 50px;
      opacity: 0.5;
      background-color: red;
    }
  </style>

  <div class="box"></div>
  <div class="box2"></div>
  <input type="button" id="btn" value="改變box2的盒子寬度">
  <script>
    // js觸發(fā)過(guò)渡效果
    window.onload = function() {
      document.querySelector('#btn').addEventListener('click', function() {
        document.querySelector('.box2').style.width = '600px';
      }, false);
    }
  </script>

4. 平面2D轉(zhuǎn)換transform

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合即將學(xué)習(xí)的過(guò)渡和動(dòng)畫(huà)知識(shí)，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

1. 轉(zhuǎn)換原點(diǎn) transform-origin 設(shè)置轉(zhuǎn)換圖形的原點(diǎn)。可以設(shè)置兩個(gè)值，類(lèi)型可以是：百分比、像素、位置名（left、top、bottom、right）
2. 移動(dòng) translate(x, y) 可以改變?cè)氐奈恢?，x、y可為負(fù)值，帶像素坐標(biāo)。
3. 縮放 scale(x, y) 可以對(duì)元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，不可為負(fù)值，不帶參數(shù)。
4. 旋轉(zhuǎn) rotate(deg) 可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；值可選：30deg或者0.5turn。
5. 傾斜 skew(deg, deg) 可以使元素按一定的角度進(jìn)行傾斜。單位deg
6. 如果有多個(gè)轉(zhuǎn)換操作需要用空格隔開(kāi)多個(gè)css變換函數(shù)。

demo

.box {
  transition: all 0.3s ease-in;/* 配合動(dòng)畫(huà)效果 */
  transform-origin: left top;
}
.box:hover {
  /* transform: translate(90px) rotate(0.1turn); */
  transform: translate(20px, 30px) rotate(30deg);
  transform: translate(90px) skew(30deg) scale(0.5, .9) rotate(0.1turn);
}

5. 關(guān)于弧度和角度的單位補(bǔ)充

• deg 度。一個(gè)完整的圓是 360deg。例：0deg，90deg，14.23deg。
• grad 百分度。一個(gè)完整的圓是 400grad。例：0grad，100grad，38.8grad。
• rad 弧度。一個(gè)完整的圓是 2π 弧度，約等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
• turn 圈數(shù)。一個(gè)完整的圓是 1turn。例：0turn，0.25turn，1.2turn。

transform: rotate(0.2rad);
transform: rotate(39deg);
transform: rotate(30grad);
transform: rotate(0.2trun);

6. 立體3D轉(zhuǎn)換

CSS3給我們帶來(lái)驚喜的是3D的轉(zhuǎn)換，給頁(yè)面的效果帶來(lái)了無(wú)限的可能。但是學(xué)習(xí)這塊需要有3D的模型的思維建立，老馬剛開(kāi)始學(xué)習(xí)的時(shí)候也非常頭疼，但是老馬搞過(guò)Unity3D，所以搞起來(lái)很順手。

大家先建立3D模型思維，看看下面圖是否能在內(nèi)心中體會(huì)在3D空間中沿著X、Y、Z軸進(jìn)行旋轉(zhuǎn)。

3D旋轉(zhuǎn)

6.1 立體3D的坐標(biāo)軸

注意：x\y\z的正值的方向。

3D坐標(biāo)圖

左手坐標(biāo)系

css3中旋轉(zhuǎn)后都是按照左手坐標(biāo)系進(jìn)行運(yùn)轉(zhuǎn)。旋轉(zhuǎn)的正值的方向就是：手指彎曲的方向。

6.2 立體3D轉(zhuǎn)換的操作

transform的3D操作屬性

1. 移動(dòng) translate3d(tx, ty, tz) 可以改變?cè)氐奈恢茫瑇、y,z可為負(fù)值，帶像素坐標(biāo)。translate3d(10px,0px,0px)。z方向的移動(dòng)必須配合perspective。三個(gè)方向分別可以對(duì)應(yīng)：translateX、translateY、translateZ
2. 縮放 scale3d(x, y,z) 可以對(duì)元素進(jìn)行x,y,z三個(gè)方向的縮放，x、y、z的取值可為小數(shù)，不可為負(fù)值，不帶參數(shù)。也可以用scaleX、scaleY、scaleZ替代
3. 旋轉(zhuǎn) rotate3d(x1,y1,z1,a) 可以對(duì)元素進(jìn)行x、y、z三個(gè)方向的旋轉(zhuǎn)，a正值為順時(shí)針，負(fù)值為逆時(shí)針；值可選：30deg或者0.5turn。css3的3d旋轉(zhuǎn)滿(mǎn)足左手坐標(biāo)系的法則，掌心指向的方向就是正方向。x1、y1、z1的取值0-1，表示旋轉(zhuǎn)的矢量。一般直接用rotateX、rotateY、rotateZ代替。
4. perspective視距,作為transform的函數(shù)，作用于自身，必須寫(xiě)在最前面。表示觀察者和 z平面的距離。

/* X方向縮放 */
transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */
使用向量[sx, 1] 完成在X方向上的縮放.

/* Y方向縮放 */
transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */
/* 使用向量[1, sy] 完成在Y方向的縮放. */

/* 傾斜 */
transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */
/* 元素在X軸和Y軸方向以指定的角度傾斜。如果ay未提供，在Y軸上沒(méi)有傾斜。 */

/* X方向傾斜 */
transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */
/* 繞X軸以指定的角度傾斜 */

/* Y方向傾斜 */
transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */
/* 繞Y軸以指定的角度傾斜 */

/* 平移 */
transform:  translate(tx[, ty])  /* one or two <length> values */


/* X方向平移 */
transform:  translateX(tx)       /* see <length> for possible values */
/* 在X軸平移指定距離 */

/* Y方向平移 */
transform:  translateY(ty)       /* see <length> for possible values */

transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

6.3 3D顯示模式

transform-style: 可選值：flat（2D默認(rèn)值） ，preserve-3d （3D）

要想有3D的顯示效果，請(qǐng)選擇preserve-3d。

6.4 perspective透視

作為單獨(dú)的CSS屬性，指定了觀察者與z=0平面的距離。這個(gè)是作用于盒子內(nèi)的所有子元素。跟transform中的perspective()函數(shù)的意義是一樣的。

perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;

透視

透視距離

案例1： 3D立方體

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cube</title>
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .cube {
      position: relative;
      margin: 200px auto;
      width: 202px;
      height: 202px;
      perspective: 1000px;
      /* 設(shè)置顯示效果為3d效果 */
      transform-style: preserve-3d;
      transform: rotateX(-10deg) rotateY(20deg);
    }

    .cube div {
      border: 1px solid #ccc;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0; 
      right: 0;
      line-height: 200px;
      text-align: center;
      opacity: 0.7;
    }

    .cube .right {
      transform: rotateY(90deg) translateZ(100px);
      background-color: blue;
    }
    .cube .left {
      transform: rotateY(90deg) translateZ(-100px);
      background-color: red;
    }

    .cube .top {
      transform: rotateX(90deg) translateZ(100px);
      background-color: yellow;
    }
    .cube .bottom {
      transform: rotateX(90deg) translateZ(-100px);
      background-color: lightcoral;
    }

    .cube .front {
      transform: translateZ(100px);
      background-color: purple;
    }
    .cube .back {
      transform: translateZ(-100px);
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
    <div class="front">front</div>
    <div class="back">back</div>
  </div>
</body>
</html>

案例2：3D導(dǎo)航案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D導(dǎo)航案例</title>
  <style>
    html, body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul { list-style: none; }
    
    .nav .nav-item {
      float: left;
      width: 150px;
      height: 30px;
      /* border: 1px solid #ccc; */
      text-align: center;
      line-height: 30px;
      position: relative;

      /* 要有3d的效果：需要設(shè)置以下兩個(gè)屬性 */
      perspective: 1000px;
      transform-style: preserve-3d;

      transition: transform 0.6s ease;
    }
    .nav .nav-item:hover {
      transform: rotateX(-90deg);
    }
    /* 約定： a標(biāo)簽是立方體的前面。  */
    /* div是立方體的上面 */

    .nav .nav-item a, .nav .nav-item .des {
      width: 150px;
      height: 30px;
      opacity: .7;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
    }
    .nav .nav-item a {
      display: block;
      background-color: darkcyan;
      text-decoration: none;
      transform: translateZ(15px)
    }
    .nav .nav-item .des {
      background-color: blue;
      transform: rotateX(90deg) translateZ(15px);
    }
  </style>

</head>
<body>
  <ul class="nav">
    <li class="nav-item">
      <a href="javascript:">item1</a>
      <div class="des">item==1</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item2</a>
      <div class="des">item==2</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item3</a>
      <div class="des">item==3</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item4</a>
      <div class="des">item==4</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item5</a>
      <div class="des">item==5</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item6</a>
      <div class="des">item==6</div>
    </li>
  </ul>
</body>
</html>

6.5 backface-visibility 設(shè)置元素背面是否可見(jiàn)

參數(shù)：可選值

1. visible 背面是可見(jiàn)的。
2. hidden 背面是不可見(jiàn)的。

注：當(dāng)一個(gè)元素設(shè)置了 rotateY(180deg)，相當(dāng)與對(duì)元素進(jìn)行“翻面”，此時(shí)如果設(shè)置了backface-visibility: visible此時(shí)該元素不可見(jiàn)。

案例1: 翻轉(zhuǎn)顯示背面盒子信息

 <style>
    html, body, div, pre {
      padding: 0;
      margin: 0;
    }

    .box-wrap {
      width: 450px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      perspective: 1000px;
    }

    .box-wrap .front, .box-wrap .back {
      border: 1px solid #ccc;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0; 
      top: 0;
      opacity: .8;
      transition: all 1s ease;
      backface-visibility: hidden;
    }
    .box-wrap .front {
      text-align: center;
      background-color: rebeccapurple;
    }
    .box-wrap .front img {
      width: 200px;
      height: 200px;
      border: 2px solid #cccc;
      border-radius: 50%;
    }

    .box-wrap .back {
      background-color: green;
      transform: rotateY(-180deg);
    }

    .box-wrap:hover .front {
      transform: rotateY(180deg);
    }

    .box-wrap:hover .back {
      transform: none;
    }
  </style>

  <div class="box-wrap">
    <div class="front">
      <img src="../img/a.jpg" alt="">
      <h3>老馬在線嗎？</h3>
    </div>
    <div class="back">
      <h3>聯(lián)系老馬</h3>
      <pre>
          對(duì)應(yīng)視頻地址1：https://chuanke.baidu.com/s5508922.html
          對(duì)應(yīng)視頻地址2：https://qtxh.ke.qq.com/
          老馬qq： 515154084
          老馬微信：請(qǐng)掃碼
      </pre>
    </div>
  </div>

案例2： 揭開(kāi)頭蓋盒子案例：

<style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .box {
      position: relative; 
      margin: 100px auto;
      width: 202px;
      height: 450px;
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    .box div {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;

      position: absolute;
      left: 0; 
      top: 0;
      opacity: .7;
    }
    .top {
      background-color: blue;
      z-index: 10;
      transition: transform 1s ease;
      /* 第一個(gè)值是：設(shè)置水平的旋轉(zhuǎn)參考點(diǎn) */
      /* 第二個(gè)值是：設(shè)置垂直的旋轉(zhuǎn)參考點(diǎn) */
      /* 第三個(gè)值是：設(shè)置z的旋轉(zhuǎn)參考點(diǎn) */
      transform-origin: 50% bottom 0;
    }
    .bottom {
      background-color: maroon;
      z-index: 9;
    }

    .box:hover .top {
      transform: rotateX(-180deg);
    }
  </style>

 <div class="box">
    <div class="top">top</div>
    <div class="bottom">bottom</div>
  </div>

下一篇預(yù)告：

• CSS3動(dòng)畫(huà)
• 彈性盒子
• animate動(dòng)畫(huà)庫(kù)
• web在線字體
• 字體圖標(biāo)
• 兼容處理

聯(lián)系老馬

對(duì)應(yīng)視頻地址：https://qtxh.ke.qq.com/
老馬qq： 515154084
老馬微信：請(qǐng)掃碼

掃碼加老馬微信