CSS 空間轉換動畫

1. 空間轉換

空間：是從坐標軸角度定義的 X、Y 和 Z 三條坐標軸構成了一個立體空間，Z 軸正方向是垂直頁面向外的方向。空間轉換又叫 3D轉換。

屬性：

<style>transform: translate3d(x,y,z);transform: translateX();transform: translateY();transform: translateZ();
</style>

取值：

像素單位數值
百分比（以盒子自身尺寸為參照）

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;margin: 100px auto;transition: all 0.5s;}div:hover {transform: translate3d(100px,200px,200px);}</style>
</head>
<body><div></div>
</body>
</html>

需要注意的是，默認情況下，Z 軸上的變化是無法生效的，因為屏幕是二維的，并不能顯示 Z 軸的效果，觀察 Z 軸變化的通過設置視距的方式來實現

1.1 視距 - perspective

作用：指定了觀察者與 Z=0 平面的距離，為元素添加近大遠小的透視效果。

屬性：添加給直接父級，取值范圍800-1200效果最佳

perspective: 視距;

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {perspective: 1000px;}.son {width: 100px;height: 100px;background-color: pink;margin: 100px auto;transition: all 0.5s;}.son:hover {transform: translateZ(200px);}</style>
</head>
<body><div class="father"><div class="son"></div>    </div>
</body>
</html>

1.2 空間轉換 - 旋轉

作用：設置對象以指定坐標軸為軸旋轉，配合視距屬性可使空間轉換更為真實

屬性：

<style>/* 繞 Z 軸轉 */transform: rotateZ(轉動角度);/* 繞 X 軸轉 */transform: rotateX(轉動角度);/* 繞 Y 軸轉 */transform: rotateY(轉動角度);/* 自定義旋轉軸位置 */transform: rotate3d(x,y,z,角度度數)
</style>

transform:rotate3d(x,y,z,角度度數):

x,y,z 取值為0-1之間的數字
根據 x,y,z 的值會自動生成一個新的旋轉軸，指定盒子會繞著這個軸旋轉指定角度

左手法則：用以根據旋轉方向確定取值正負。
-左手握住旋轉軸，拇指指向正值方向，其他四個手指彎曲方向為旋轉正值方向：
在這里插入圖片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {perspective: 1000px;width: 500px;margin: 100px auto;}img {width: 500px;transition: all 0.5s;}.father img {transform: rotateX(45deg);}</style>
</head>
<body><div class="father"><img src="img.jpg" alt=" ">    </div>
</body>
</html>

頁面效果：
在這里插入圖片描述

1.3 立體呈現 - transform-style

作用：設置元素的子元素是位于 3D 空間中還是平面中。

屬性：

<style>/* 子集處于平面中 */transform-style:flat;/* 子集處于 3D 空間 */transform-style:preserve-3d;
</style>

呈現立體圖形步驟：

父級元素添加 transform-style:preserve-3d;
子集定位，使所有子集都在盒子內部
調整子盒子的位置

例如：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 給父級盒子添加 3D 屬性 */margin: 100px auto;width: 200px;position: relative;transform-style: preserve-3d;transition: all .5s;perspective: 1000px;}.box div {/* 子集定位 */position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.back {transform: translateZ(-100px);background-color: red;}.front {transform: translateZ(100px);background-color: green;}.box:hover {transform: rotateY(60deg);}</style>
</head>
<body><div class="box"><div class="back">后面</div><div class="front">前面</div></div>
</body>
</html>

頁面效果：
請添加圖片描述
靜態的圖片很難展示出動態的效果，所以大家可以試著自己運行一下來看看動畫效果。

需要注意的是，當盒子在空間中轉換的時候，他的坐標軸也會隨之改變。

1.4 空間轉換 - 縮放

作用：在空間中縮放指定對象。

屬性：

<style>transform: scale3d(x,y,z);transform: scaleX();transform: scaleY();transform: scaleZ();
</style>

屬性值：

屬性值為具體數值，即縮放倍數，小于1縮小，大于1放大。

2. 動畫 - animation

過渡：實現兩個狀態間的變化過程
動畫：實現多個狀態間的變化過程，動畫過程可控（重復播放、最終畫面、是否暫停）

2.1 動畫的基本用法

動畫實現步驟：

定義動畫：有兩種寫法

<style>/* 只有初始和末尾狀態 */@keyframes 動畫名稱1 {from {狀態1}to {狀態2}}/* 將整個動畫過程分為若干部分 *//* 百分比表示占動畫時長的百分比 */@keyframes 動畫名稱2 {0% {狀態1}10% {狀態2}.....100% {狀態10}}
</style>

使用動畫

<style>animation: 動畫名稱 動畫花費時長(s);
</style>

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 100px;height: 100px;background-color: pink;animation: change1 1s;}.div2 {width: 100px;height: 100px;background-color: green;animation: change2 1s;}@keyframes change1 {from{width: 100px;}to{width: 300px;}}@keyframes change2 {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

動畫效果不便展示，請大家自行運行瀏覽

2.1 animation 復合屬性

使用動畫的屬性值不止上面兩種，具體為：

<style>animation: 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時狀態;
</style>

動畫名稱和動畫時長必須要寫
屬性值不分先后順序
如果有兩個時間值，第一個時間表示動畫時長，第二個時間表示延遲時間

速度曲線取值：

linear：勻速
steps(x)：x為數字，表示把動畫分為x步完成。工作中可配合精靈圖實現精靈圖動畫

重復次數取值：

數字：表示重復次數
infinite：表示無限循環

動畫方向取值：

alternate：反向動畫

執行完畢時狀態取值：

forwards：完畢時狀態為動畫最后狀態
backwards：默認值，完畢時狀態為初始狀態

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;animation: change 1s linear 2s infinite alternate;}@keyframes change {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>

動畫效果不便展示，請大家自行運行瀏覽

2.2 animation 拆分屬性

屬性	作用	取值
animation-name	動畫名稱	動畫名稱
animation-duration	動畫時長	時長(s)
animation-delay	延遲時間	時長(s)
animation-fill-mode	動畫執行完畢時狀態	forwaeds（最后一幀狀態）；backwards（第一幀狀態）
animation-timing-function	速度曲線	steps()：逐幀動畫
animation-iteration-count	重復次數	infinite（無限循環）
animation-direction	動畫執行方向	alternate（反向）
animation-play-state	暫停動畫	paused（暫停），通常配合 :hover 使用

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;animation-name: change;animation-duration: 1s;animation-iteration-count: infinite;animation-delay: 1s;animation-timing-function: linear;}div:hover {animation-play-state: paused;}@keyframes change {0% {width: 100px;}30% {width: 300px;}50% {width: 500px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>

動畫效果不便展示，請大家自行運行瀏覽

2.3 多組動畫

作用：設置一個標簽使用多個動畫

屬性：

<style>animation:動畫1,動畫2,...動畫N;
</style>

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;/* 使用多個動畫 */animation: change 1s linear infinite,move 3s;}div:hover {animation-play-state: paused;}@keyframes move {from {transform: translate(0,0);}to {transform: translate(100px,0);}}@keyframes change {0% {width: 100px;}100% {width: 200px;}}</style>
</head>
<body><div></div>
</body>
</html>