• 1、transition-property 設置過渡的屬性，比如：width height background-color
• 2、transition-duration 設置過渡的時間，比如：1s 500ms
• 3、transition-timing-function 設置過渡的運動方式，常用有 linear(勻速)|ease(緩沖運動)
• 4、transition-delay 設置動畫的延遲
• 5、屬性連寫:transition: property duration timing-function delay 同時設置四個屬性

????????? width:200px;
?????????? height:200px;
?????????? background: red;

/*transition-property: width;
?????????? transition-duration:2s;
?????????? transition-timing-function:linear;
?????????? transition-delay: 2s;*/

/*transition:width 1s linear,height 1s linear,background-color 1s linear;*/

transition: all 3s ease;
??????? }

.box:hover{

width:500px;
height: 50px;
background-color: green;
??????? }

?

?

?

?

?

?

transform變換

形變效果

• 1.translate(x,y) 設置盒子位移
• 2.scale(x,y) 設置盒子縮放
• 3、rotate(deg) 設置盒子旋轉
• 4、skew(x-angle,y-angle) 設置盒子斜切
• spective 設置透視距離

???????????? /*transform 形變屬性 縮放 平移 旋轉*/
??????????? /*transform:scale(2,2);*/
??????????? /*transform:translate(0,200px);*/
??????????? /*transform: rotate(45deg);*/
??????????? /*transform:rotateX(180deg);*/

/*perspective(800px)3d透視效果*/
???????????/*transform:perspective(800px) rotateY(45deg);*/

/*//斜切*/
?????????? transform: skew(30deg,45deg);

}

設置形變中心

tranform-origin設置變形的中心點,接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right

?

三維形變

• translateX、translateY、translateZ 設置三維移動
• rotateX、rotateY、rotateZ 設置三維旋轉
• scaleX、scaleY、scaleZ 設置三維縮放

?

設置盒子背景是否可見

backface-visibility設置盒子背面是否可見

?

設置盒子是否按照3d展示

transform-styleflat | preserve-3d 設置盒子是否按3d空間顯示

??????????? /*backface-visibility: hidden;*/

/*是否已3d的空間展示效果*/
??????????? /*transform-style: flat;*/

?

總結

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

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