- A+
所属分类：Web前端
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="CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)" alt="#" class="imgp"/> </body> </html> 
