CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform) |
您所在的位置:网站首页 › html怎么让图片变大 › CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform) |
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
1.缩小和放大属性(scale)
格式:transform:缩小类型(数值); 注意:缩小和放大都是 scale ; 其中的值(0~1)代表缩小;大于1代表放大。其中0代表缩小到没有,1代表不变。 transform transform:scale(0.5) /*整体缩小到原来的一半*/ transform:scale(2) /*整体放大到原来的一半*/ transform:scaleX(0.5) /*宽缩小到原来的一半*/ transform:scaleX(2) /*宽放大到原来的一半*/ transform:scaleY(0.5) /*高缩小到原来的一半*/ transform:scaleY(2) /*高放大到原来的一半*/ /*好像看不出变化*/ transform:scaleZ(0.5) transform:scaleZ(2) 2.旋转属性(rotate)格式:transform:旋转类型(旋转度数 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> Document /*hover是鼠标悬停在图片上时触发*/ .imgp:hover{ /*图片二维旋转360度*/ transform:rotate(360deg); } img{ /*给图片设置过度为0.5秒,不设这个太快了看不清图片旋转*/ transition: 0.5s; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |