1.2D轉(zhuǎn)換
- rotate()：在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素姿骏，負(fù)值是允許的糖声，這樣是元素逆時(shí)針旋轉(zhuǎn)
div{
background:black;
border:1px solid red;
height:100px;
width:100px;
box-sizing:border-box;
transform: rotate(30deg)
}
- translate()：根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)
transform: translate(50px,100px);
- scale()：該元素增加或減少的大小分瘦，取決于寬度（X軸）和高度（Y軸）的參數(shù)
transform: scale(2,3); /*轉(zhuǎn)變寬度為原來的大小的2倍蘸泻，和高度為其原始大小3倍*/
- skew() ：包含兩個(gè)參數(shù)值，分別表示X軸和Y軸傾斜的角度嘲玫，如果第二個(gè)參數(shù)為空悦施，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜
transform: skew(30deg,20deg);
/*
skewX(<angle>);表示只在X軸(水平方向)傾斜去团。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜
*/
2.3D轉(zhuǎn)換
- rotateX：圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素
transform: rotateX(120deg)
- rotateY：圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素
transform: rotateY(120deg)
3.transition
div{
transition: width 2s, height 2s, transform 2s;
}
/*在寬度抡诞、高度和轉(zhuǎn)換上2s完成過渡效果*/
transition: property duration timing-function delay;
transition-property：指定CSS屬性的name穷蛹，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function:指定transition效果的轉(zhuǎn)速曲線
transition-delay:定義transition效果開始的時(shí)候
