CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(tranform)

2022-01-21 20:31:50 阅读：152 来源： 互联网

标签：transform 标签 100px tranform 旋转 0.5 移动 CSS

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>

标签：transform,标签,100px,tranform,旋转,0.5,移动,CSS
来源： https://www.cnblogs.com/akc4/p/15831628.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。