transition：過(guò)渡
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
元素從一種樣式逐漸改變?yōu)榱硪环N的效果
transform：變換
對(duì)元素進(jìn)行移動(dòng)辈讶、縮放锦秒、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸脆淹。
- rotateX() 方法
通過(guò) rotateX() 方法签杈，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)瘫镇。
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
2.rotateY() 旋轉(zhuǎn)
通過(guò) rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
動(dòng)畫延遲：
transition-delay:2s;
規(guī)定width動(dòng)畫效果的時(shí)長(zhǎng)
transition: width 2s;
