H5C3第三天

在這裡插入圖檔描述# H5C3第三天

3D轉換

3維坐标系

• X軸、Y軸、Z軸

3d移動translate3d

• transform:translate3d(x,y,z);

3d旋轉rotate3d

• transform:rotate(x,y,z);
• 左手法則：
  • 左手的手拇指指向X(Y,Z) 軸的正方向
  • 其餘手指的彎曲方向就是該元素沿着x(Y,Z)軸旋轉的方向了

視距

• 視距原點和視距一樣，也是設定給要觀察元素的父元素上
• perspective-origin:center center; 預設值是元素的中心點
• perspective-origin:10px； 指定了一個參數的時候，第二個參數預設為center 也就是50%；
• perspective-origin:10% %； 百分比都是相對于自身的寬度和高度

3D轉換樣式

[外鍊圖檔轉存失敗(img-QCoyrfEo-1566827957052)(C:\Users\Administrator\Desktop\就業班筆記\H5C3\H5C3第三天.assets)]

3D轉換總結

1. 百分比機關都是相對于自身
2. 視距、視距原點、轉換樣式 這三個屬性都是給父元素添加的
3. 視距可以給上級、上上級、上上上級父元素

css3相容處理

css3涉及到較多的新屬性，某些低版本（如ie8以及以下）的浏覽器對css3的支援程度不夠，是以需要做以下處理

添加對應的浏覽器的字首 常見字首如下

• 谷歌 -webkit
• 火狐 -moz
• IE -ms

如對

border-radius

進行相容性處理

-webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最後
      border-radius: 30px 10px;
           

如果發現添加字首也解決不了相容性問題，那麼就不要使用該css3屬性