animation:????????復合寫法（簡寫方式）：animation:名字 時間 延遲 次數 曲線

<style> .box{ width: 500px; height: 500px; border: 2px solid red;animation:run 3s linear infinite alternate ; }/* 創建動畫 */ @keyframes run { 0%{ } 25%{ transform: translate(400px,0); } 50%{ transform: translate(400px,400px); } 75%{ transform: translate(0,400px); } 100%{ transform: translate(0,0); } }</style>

3d變形: 父盒子轉換成3d舞臺： transform-style: preserve-3d;

3D場景，有3個坐標軸，x、y、z軸

3d 位移：

transform:translateX()====x軸上移動
transform:translateY()====y軸上移動
transform:translateZ()====z軸上移動
簡寫：transform:translateX() translateY() translateZ()
再簡寫：transform:translate3D(x,y,z);

3d旋轉

transform: rotateX(30deg);====圍繞x軸旋轉
transform: rotateY(30deg);====圍繞y軸旋轉
transform: rotateZ(30deg);====圍繞z軸旋轉
transform: rotate(30deg);=====圍繞中心點旋轉。
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);=====會圍繞x、y、z軸都轉。
transform: rotate3d(1,1,1,0deg);=====x,y,z,旋轉?度 0代表這個軸不參與轉動 1代表參與轉動
以后做旋轉想圍繞哪個軸轉建議在后面帶上x、y、z。

3d縮放

在父盒子上寫css屬性：perspective: 景深值

讓3d效果更加的逼真，用景深來實現。

讓背面不可?：加在子元素上的。

backface-visibility:hidden;
要把元素翻轉過去了，元素就配合這個屬性，元素不可?了。

畫立方體

旋轉相冊

總結

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

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