Transform(3d)：x軸向右是正方向，y軸向下是正方向，z軸垂直向外是正方向；注意transform:rotate(angle)，可以使元素髮生旋轉，發生旋轉之後的元素，其對應的 x y z的方向指向會發生變化，本文重點講解；
在設置transition的前提下，transform變換纔會有類似動畫的效果
一：首先看一些有關3d的常用屬性：
transform-origin：參數1 參數2
設置對象的圍繞的旋轉中心，默認值是50% 50%
參數1 取值：百分比 基準是元素自身寬度，length 值，left center right 分別旋轉中心是水平方向的左邊界 居中 和右邊界
參數2 取值：百分比 基準是元素自身高度，length 值，top center bottom 分別旋轉中心是水平方向的左邊界 居中 和右邊界
如果第二個值沒有設置默認是50%；
transform-style:flat | preserve-3d 默認是flat
指定某元素的子元素是（看起來）位於三維空間內，還是在該元素所在的平面內被扁平化。
當該屬性值爲「preserve-3d」時，元素將會創建局部堆疊上下文。
決定一個變換元素看起來是處在三維空間還是平面內，需要該元素的父元素上定義 <’ transform-style ‘> 屬性。
- perspective ：none |length 默認是none
指定某元素距離瀏覽器窗口的垂直於瀏覽器窗口的距離，當length>0 的時候，會使得元素看起來比實際要大，length<0 的時候，會使得元素看起來比實際要小。
二 老司機帶帶我，不要走錯路
transform: rotate(angle) translate(length | percentage)之間的關係。translate的百分比取值基準元素自身的寬(x)和高(y)來確定移動的距離。
1 明確瀏覽器的解析過程，從上到下 從左到右
2 明確rotate()會使座標也跟着旋轉
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img {
/*transform: translateX(1000px) translateY(500px) rotateZ(90deg);*/
transform: translateX(1000px) rotateZ(90deg) translateX(500px);
</style>
</head>
<body>
<img src="img/car.jpg" alt="" />
</body>
</html>
- 代碼執行過程1：
transform: translateX(1000px) translateY(500px) rotateZ(90deg);
對應的圖片如下：執行過程是先向x軸正方向移動1000px，在向y軸正方向移動500px,然後圖片圍繞元素中心旋轉90deg。
執行完之後是
代碼執行2
transform: translateX(1000px) rotateZ(90deg) translateX(500px);
最初狀態是 圖xy1 先向x軸正方向移動1000px 然後執行rotateZ(90deg),此時圖片變換爲 圖xy2 所以這一步還是對應translateX(500px)來移動飛車。
注意：一般建議將旋轉放在最後。不過還是眼看項目實際需求來
三 擼一段動畫大家體驗下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img {
width: 200px;
}
@keyframes autoMove{
20%{
/*0~40%的時候的變換過程,初始默認x向右 y向下 z垂直向外*/
transform:translatex(1000px)
}
25%{
/*40%~50%的時候的變換過程*/
transform: translatex(1000px) rotatez(90deg);
}
50%{
/*50%~90%時候的變換過程*/
transform: translatex(1000px) translatey(500px) rotatez(90deg) ;
}
55%{
/*注意每次的變化都是在上一次的基礎上進行變化*/
transform:translatex(1000px) translatey(500px) rotatez(180deg);
}
75% {
transform:translatex(0px) translatey(500px) rotate(180deg);
}
80% {
transform: translatex(0px) translatey(500px) rotate(270deg);
}
95% {
transform: translatex(0px) translatey(0px) rotate(270deg);
}
100%{
transform:translatex(0px) translatey(0px) rotate(360deg);
}
}
.autoMove{
animation:autoMove 5s linear ;
}
/*注意，每次動畫都要保持上一步動畫的結果，才能繼續進行動畫，如果不保持上一步動畫的結果，那麼會導致動畫迴歸到原來的值*/
</style>
</head>
<body>
<img src="img/car.jpg" alt="" class="autoMove"/>
</body>
</html>
1 建議將每個階段的動畫註釋掉，看下效果。
2 旋轉的效果都是放在了最後，避免混亂。