CSS設置標簽、圖片,放大、縮小、旋轉、移動、傾斜(transform)


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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM