移动开发day1_过渡_2d转换_3d立体
今天是就業班開班的第一天，上完了一天的課，做點總結。
專門在手機或者 平板電腦 瀏覽器網頁
1. 微信公眾號
2. 微信小程序
3. 移動web基礎知識 可以用在微信里面
移動端手機屏幕很多也是不一樣，
長度單位 要補充！！！ px 百分比
總結
主流的移動布局的解決方案
對常規頁面布局 心里會知道如何實現，不同方式之間的區別 有點 缺點 。。。
?
如width，height transition-property: width; 寫all代表全部
transition-duration 執行過渡的持續的時間
設置過渡的持續時間 如 transition-duration:10s
transition-timing-function 速度曲線 (可省略)
設置變化的速度曲線 如勻速等
-
linear： 勻速
-
ease： 慢-快-慢 默認值
-
ease-in： 慢-快。
-
ease-out： 快-慢。
-
ease-in-out： 慢-快-慢。
-
steps 設置 跳躍性的動畫
steps (n,start) 在該段時間的開始 觸發
steps(n,end) 在該段時間的 末端 出發
transition-delay 延遲時間 （可省略）
設置產生過渡時的延遲時間 如 transition-delay: 10s;
?
/* 過渡的屬性為width 持續3s 勻速 延遲0s */
transition: width 3s linear 0s;
?
可以改變元素 在 二維平面上的位置 和 形狀 的一種技術
移動 平移 translate
旋轉 rotate
縮放 scale
傾斜 。。。了解 因為 布局 不用它。。 skew。。
移動translate
能夠改變元素的位置的 技術 有哪一些
定位
margin
translate
布局的時候 如何選擇以上的3個屬性進行使用
大的布局設定 優先用定位
小微調再根據情況去選擇
margin 會擠壓相鄰的元素
移動translate 不會擠壓相鄰元素，有點類似定位 覆蓋 相鄰元素。
行內元素加轉換屬性 無效
代碼
div{? ?transform:translate(0px,0px) ;
}
旋轉 rotate
讓元素 進行旋轉
旋轉的正方向是 順時針
旋轉的中心點是被旋轉元素的中心點
代碼
div{? ?transform:rotate(30deg);
}
?
縮放 scale
縮放一個div 寬度 和 高度而已
?
上午的過渡和轉換的總結
過渡 transition
過渡 有4個參數可以設置
要過渡的屬性名 transition-property
要過渡的持續的時間 transition-duration
速度曲線 transition-timgin-function
延遲時間 transition-delay
?
2d-轉換
改變元素二維平面上的位置 和形狀的技術
移動
移動 平移 translate(水平方向的平移，垂直方向上的平移)
百分比單位 是對于自身的寬度和高度，區別 于 定位 和 margin
移動 類似絕對定位，不會擠壓相鄰的元素，覆蓋
旋轉 rotate
單位是角度 deg
旋轉正方向是順時針
默認 旋轉的中心點 元素的中心
transform-origin:0 0 ；
縮放 scale
縮放是元素的寬度和高度
單位 沒有單位 就是 數值而已。
行內元素 加轉換 沒有效果
移動 旋轉 縮放 一起使用
div{?transform: translateX(500px) rotate(90deg) scale(2,2);
}
?
?
?
?
3d立體空間
有三條坐標軸
x軸，方向 水平從左 到右
y軸，垂直上從 到下
z軸 從電腦屏幕里面 指向屏幕的外面！！
?
?
3d轉換
可以改變元素在 3d空間內的位置 和形狀 一種技術！！
3d 移動
利用眼睛 + vs code 代碼提示來使用即可
3d 旋轉
看著代碼 能想象到如何旋轉
看著案例 能知道 代碼是怎么寫
3d 縮放
?
?
3d旋轉
旋轉方向判定
讓物體 沿著 x軸旋轉的時候，
左手準則
伸出左手
左手 手拇指 指向 要旋轉的軸的正方向 x軸的正方向
左手的其他手指 彎曲的方向 就是 物體 旋轉的方向
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box{width: 400px;height: 400px;/* border: 1px solid #000; */margin: 100px auto;position: relative;/* transform: rotateX(30deg); */transform:rotate3d(1,1,1,30deg);/* box開啟了3d容器環境 */transform-style: preserve-3d;}.box>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: .8;}.front{background-color: firebrick;/* 正方向 200px z軸 */transform: translateZ(200px);}.back{background-color: blue;/* 反方向 -200px z軸 */transform: translateZ(-200px);}.left{background-color: lawngreen;/* x軸負方向移動 200px 沿y軸旋轉90度 */transform: translateX(-200px) rotateY(90deg);}.right{background-color: rosybrown;transform: translateX(200px) rotateY(90deg);}.up{background-color: peru;/* y軸負方向 移動200px 沿著x軸旋轉90deg */transform: translateY(-200px) rotateX(90deg);}.down{background-color: darkmagenta;transform: translateY(200px) rotateX(90deg);}</style></head><body><!-- 1 定好標簽結構 2 子元素先重疊在一起 定位 3 為了更好觀察每一個面 分別 加上顏色4 要使用 3d移動 + 3d 旋轉 來構建6個面 重點1 前面 和后面 關鍵是控制 物體的z軸上的距離5 為了要看到完整的一個立方體 1 大盒子加一個旋轉效果 transform:rotate3d(1,1,1,30deg);2 給每一個面 加一點透明度 6 給box加一個新屬性，開啟容器3d環境 屬性 1 瀏覽器 默認 沒有開啟3d效果 把每一個div當成是一個平面來對待 transform-style: preserve-3d;--><div class="box"><div class="front"></div><div class="back"></div><div class="left"></div><div class="right"></div><div class="up"></div><div class="down"></div></div></body> </html>
3d效果比較多，對瀏覽器 性能要求比較高
3d效果 虛擬現實 真實 場地體驗。。 3d效果 。。。
剩下一些屬性 視距 視距圓點 容器內開啟3d環境 都是了解。
canvas
?
轉載于:https://www.cnblogs.com/replaceroot/p/10646602.html
總結
以上是生活随笔為你收集整理的移动开发day1_过渡_2d转换_3d立体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2 Class类
- 下一篇： 如何在命令长度受限的情况下成功get到w