cHTML5 第三天

一、 認識 3D 轉(zhuǎn)換

1. 3D 的特點
   • 近大遠小
   • 物體和面遮擋不可見
2. 三維坐標系

   • x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負值

   • y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負值

   • z 軸：垂直屏幕 -- 注意：往外邊的是正值，往里面的是負值

image.png

?

二、3D 轉(zhuǎn)換

1. 3D 轉(zhuǎn)換知識要點

   • 3D 位移：translate3d(x, y, z)
   • 3D 旋轉(zhuǎn)：rotate3d(x, y, z)
   • 透視：perspctive
   • 3D呈現(xiàn) transfrom-style

2. 3D 移動 translate3d

• 3D 移動就是在 2D 移動的基礎(chǔ)上多加了一個可以移動的方向，就是 z 軸方向
• transform: translateX(100px)：僅僅是在 x 軸上移動
• transform: translateY(100px)：僅僅是在 y 軸上移動
• transform: translateZ(100px)：僅僅是在 z 軸上移動
• transform: translate3d(x, y, z)：其中x、y、z 分別指要移動的軸的方向的距離
• 注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充

3. 語法

 transform: translate3d(x, y, z)

4. 代碼演示

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充 */
transform: translate3d(100px, 100px, 0)

三、透視 perspective

1. 知識點講解

   • 如果想要網(wǎng)頁產(chǎn)生 3D 效果需要透視(理解成 3D 物體投影的 2D 平面上)
   • 實際上模仿人類的視覺位置，可視為安排一直眼睛去看
   • 透視也稱為視距，所謂的視距就是人的眼睛到屏幕的距離
   • 距離視覺點越近的在電腦平面成像越大，越遠成像越小
   • 透視的單位是像素

2. 知識要點

   • 透視需要寫在被視察元素的父盒子上面
   • 注意下方圖片

     • d：就是視距，視距就是指人的眼睛到屏幕的距離

     • z：就是 z 軸，z 軸越大(正值)，我們看到的物體就越大

?

3. 代碼演示

   body {
     perspective: 1000px;
   }
   

四、 translateZ

1. translateZ 與 perspecitve 的區(qū)別

• perspecitve 給父級進行設(shè)置，translateZ 給 子元素進行設(shè)置不同的大小

五、3D 旋轉(zhuǎn)rotateX

3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉(zhuǎn)

1. 語法

   • transform: rotateX(45deg) -- 沿著 x 軸正方向旋轉(zhuǎn) 45 度
   • transform: rotateY(45deg) -- 沿著 y 軸正方向旋轉(zhuǎn) 45 度
   • transform: rotateZ(45deg) -- 沿著 z 軸正方向旋轉(zhuǎn) 45 度
   • transform: rotate3d(x, y, z, 45deg) -- 沿著自定義軸旋轉(zhuǎn) 45 deg 為角度

2. 代碼案例

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}

3. 左手準則

   • 左手的手拇指指向 x 軸的正方向

   • 其余手指的彎曲方向就是該元素沿著 x 軸旋轉(zhuǎn)的方向

?

六、3D 旋轉(zhuǎn) rotateY

1. 代碼演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}

2. 左手準則

   • 左手的拇指指向 y 軸的正方向

   • 其余的手指彎曲方向就是該元素沿著 y 軸旋轉(zhuǎn)的方向(正值)

     
     

 ?

七、 3D 旋轉(zhuǎn) rotateZ

1. 代碼演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}

2. rotate3d

• transform: rotate3d(x, y, z, deg) -- 沿著自定義軸旋轉(zhuǎn) deg 為角度
• x, y, z 表示旋轉(zhuǎn)軸的矢量，是標識你是否希望沿著該軸進行旋轉(zhuǎn)，最后一個標識旋轉(zhuǎn)的角度
  • transform: rotate3d(1, 1, 0, 180deg) -- 沿著對角線旋轉(zhuǎn) 45deg
  • transform: rotate3d(1, 0, 0, 180deg) -- 沿著 x 軸旋轉(zhuǎn) 45deg

3. 代碼演示

   div {
     perspective: 500px;
   }
   
   img {
     display: block;
     margin: 100px auto;
     transition: all 1s;
   }
   
   img:hover {
     transform: rotate3d(1, 1, 0, 180deg)
   }
   

   八、3D 呈現(xiàn) transform-style

   1. transform-style

   • ☆☆☆☆☆

   • 控制子元素是否開啟三維立體環(huán)境

   • transform-style: flat 代表子元素不開啟 3D 立體空間，默認的

   • transform-style: preserve-3d 子元素開啟立體空間

   • 代碼寫給父級，但是影響的是子盒子

   2. 代碼演示