CSS設置標簽、圖片,放大、縮小、旋轉、移動、傾斜(transform)
1.縮小和放大屬性(scale)
格式:transform:縮小類型(數值);
注意:縮小和放大都是 scale ; 其中的值(0~1)代表縮小;大於1代表放大。其中0代表縮小到沒有,1代表不變。
tranform:scale(0.5) /*整體縮小到原來的一半*/
tranform:scale(2) /*整體放大到原來的一半*/
tranform:scaleX(0.5) /*寬縮小到原來的一半*/
tranform:scaleX(2) /*寬放大到原來的一半*/
tranform:scaleY(0.5) /*高縮小到原來的一半*/
tranform:scaleY(2) /*高放大到原來的一半*/
/*好像看不出變化*/
tranform:scaleZ(0.5)
tranform:scaleZ(2)
2.旋轉屬性(rotate)
格式:tranform:旋轉類型(旋轉度數 deg);
transform:rotate(50deg); /*設置為平面旋轉(二維旋轉)50度*/
transform:rotateX(360deg) /*以X軸為旋轉中心旋轉360度(三維旋轉)*/
transform:rotateY(180deg) /*以Y軸為旋轉中心旋轉180度(三維旋轉)*/
transform:rotateZ(90deg) /*以Z軸為旋轉中心旋轉90度(三維旋轉)效果和rotate一樣*/
transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg) /*向X、Y、Z方向各偏45度*/
transform:scale(0.5) rotateY(45deg) rotateZ(45deg); /*縮小0.5倍,並且旋轉Y和Z軸45度*/
3.移動屬性(translate)
格式1:transform:translateX(數值px)
格式2:transform:translateY(數值px)
格式3:transform:translateZ(數值px)
格式4:transform:translate(數值1px,數值2px)
注意:當translateX()里面是正數時向右邊移動,反之向左移動;translateY()里面是正數時向下移動,反之向上移動。translateZ()平面上看不出效果變化。
transform:translateX(100px) /*向右邊移動100px*/
transform:translateX(-100px) /*向左邊移動100px*/
transform:translateY(100px) /*向下邊移動100px*/
transform:translateY(-100px) /*向上邊移動100px*/
transform:translate(100px,-100px) /*向右上角移動100px*/
transform:translate(-100px,100px) /*向左下角移動100px*/
4.傾斜屬性(skew)
格式1:transform:skewX(傾斜角度deg)
格式1:transform:skewY(傾斜角度deg)
transform:skew(30deg,45deg) /*向x軸偏移3度,向y軸偏移45度*/
transform:skewX(45deg); /*向X軸傾斜45度角,向左邊傾斜45度*/
transform:skewY(90deg); /*向Y軸傾斜90度角,相對於是靠右傾斜,直到於y軸成為一條線*/
5.實例運用
功能:把鼠標放到圖片上,圖片自動旋轉360度,鼠標移出圖片,自動還原。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
/*hover是鼠標懸停在圖片上時觸發*/
.imgp:hover{
/*圖片二維旋轉360度*/
transform:rotate(360deg);
}
img{
/*給圖片設置過度為0.5秒,不設這個太快了看不清圖片旋轉*/
transition: 0.5s;
}
</style>
<img id ="target" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11499396130%2F0.jpg" alt="#" class="imgp"/>
</body>
</html>