2D變形

• top、height百分比參照與包含塊的高度
• left、margin、padding、width百分比參照與包含塊的寬度
• translate（-50%，-50%）百分比參照自身的寬高
• background-position百分比參照與(圖片區域—圖片的位圖像素值)

3D變形

transform

transform: rotateY(360deg); 3D旋轉 transform: rotate3d(1, 1, 1, 360deg); 3D旋轉 transform: translateX(100px); 3D平移 transform: translate3d(-50%, -50%, -100px); 3D平移 transform: scale3d(-1, 2, 3);

景深

景深：讓3D場景有近大遠小的效果（我們肉眼距離屏幕的距離），是一個不可繼承的屬性，但他可以作用于后代元素（不是作用于本身的）

原理：景深越大、滅點越遠、元素變形越小

景深基點：視角的位置，perspective-origin: 50% 50%; （默認值） (盡量避免景深的疊加)

代碼示例：<style type="text/css">* {margin: 0;padding: 0;}#wrap {width: 400px;height: 400px;border: 1px solid red;position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -200px;perspective: 200px; /* 控制Z軸上的位置 */perspective-origin: 200px; /* 控制X軸上的位置 */}#inner {margin-top: 100px;margin-left: 100px;width: 200px;height: 200px;border: 1px solid;border-radius: 50%;background: pink;text-align: center;font: 50px/200px "微軟雅黑";transition: 1s;/* transform: perspective(300px) rotateX(0deg); */}#wrap:hover #inner {/* transform: perspective(100px) rotateX(300deg); */transform: rotateX(360deg);}</style><div id="wrap"><div id="inner">啦啦啦</div></div>

transform-style

transform-style：營造有層級的3d舞臺，是一個不可繼承屬性，他作用于子元素

backface-visibility

backface-visibility:屬性用來設置，是否顯示元素的背面，默認是顯示的

backface-visibility:keyword; keyword有兩個值，hidden和visible，默認值是visible

3D動畫

animation-name:move; 動畫內的屬性；屬性指定應用的一系列動畫，每個名稱代表一個由@keyframs定義的動畫序列

animation-duration：屬性指定一個動畫周期的時長。默認值為0S,表示無動畫。

animation-timing-function：動畫效果

• 默認動畫效果是：由慢變快再變慢
• linear：線性過度，等同于貝塞爾曲線（0,0,1,1）
• ease:平滑過渡，等同于貝塞爾曲線（0.25,0.1,0.25,1.0）
• ease-in：由慢到塊，等同于貝塞爾曲線（0.42,0,1,1）
• ease-out:由塊到慢，等同于貝塞爾曲線（0,0,0.58,1）
• ease-in-out:由慢到快再到慢，等同于貝塞爾曲線（0.42,0,0.58,1）
• steps(n,[start|end]) ：傳入一到兩個參數，第一個參數意思是把動畫分成n等分，然后動畫就會平均地運行。 第二個參數start表示從動畫的開頭開始運行，相反，end就表示從動畫的結尾開始運行。 默認值為end。

animation-delay ：定義動畫開始前等待的時間，以秒或毫秒計（屬于動畫外的范疇）

animation-iteration-count ：只作用于動畫內的屬性 重復的是關鍵幀 ；定義了動畫執行的次數（屬于動畫內的范疇）

animation-direction:定義了動畫執行的方向 反轉的是關鍵幀和animation-timing-function

代碼示例：<style>* {margin: 0;padding: 0;}#wrap {position: relative;margin: 200px auto;width: 300px;height: 300px;border: 1px solid;}#test {position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;width: 100px;height: 100px;background: pink;text-align: center;font: 20px/100px "微軟雅黑";border-radius: 50%;animation-name: move;animation-duration: 3s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: 3;animation-direction: reverse;}@keyframes move {from {transform: rotate(0deg);}to {transform: rotate(300deg);}}</style><div id="wrap"><div id="test">僵小魚</div></div>

animation-fill-mode: 元素在動畫外的狀態 backwards：from之前的狀態與from的狀態保持一致 ;forwards:to之后的狀態與to的狀態保持一致 ;both:backwards+forwards

關鍵幀

@keyframes move {0% {transform: translateY(-100px);}25% {transform: translateY(-50px);}50% {transform: translateY(0px);}75% {transform: translateY(50px);}100% {transform: translateY(100px);}}

總結

以上是生活随笔為你收集整理的3D总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。