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

1.缩小和放大属性（scale）

格式：tranform：缩小类型（数值）；

注意：缩小和放大都是 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>

CSS设置标签、图片放大、缩小、旋转、移动(tranform)的更多相关文章

  1. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

  2. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  3. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  4. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  5. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  6. WPF多点触摸放大缩小旋转

    原文:WPF多点触摸放大缩小旋转 版权声明:本文为博主原创文章,需要转载尽管转载. https://blog.csdn.net/z5976749/article/details/40118437 如果 ...

  7. wpf下的图片放大缩小

    WPF下实现图片的放大缩小移动   在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...

  8. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  9. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

随机推荐

  1. Vue页面内公共的多类型附件图片上传区域并适用折叠面板

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附 ...

  2. 经验：使用mysqlimport快速导入csv文件

    mysqlimport 工具实际上也只是"load data infile"命令的一个包装实现.常用选项:--fields-terminated-by=字符串:设置字符串为字段之间 ...

  3. centos使用docker安装tomcat8

    下载镜像 docker pull tomcat:8 启动 docker run -d -p 8080:8080 -v /data/tomcat/webapps/:/usr/local/tomcat/w ...

  4. 【LeetCode】983. 最低票价 Minimum Cost For Tickets（C++ & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...

  5. 【LeetCode】16. 3Sum Closest 最接近的三数之和

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:3sum, three sum, 三数之和,题解,lee ...

  6. DP? (hdu3944)

    DP? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 128000/128000 K (Java/Others)Total Subm ...

  7. Problem 2236 第十四个目标

    Problem 2236 第十四个目标 Accept: 4    Submit: 6Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem D ...

  8. Iptables 实操

    目录 Iptables之实操 简介 名称概念: 四表中常用的表 Nat表 Filter表 iptables表和链的工作流程图 iptables过滤图 Iptables安装 Iptables 命令说明 ...

  9. fastapi（一）

    废话不多说,直接上代码. 目录结构, 由于我也是刚开始学这个框架,只是了解了怎么注册蓝图,JWT的集成,数据库的集成,想了解更多,自行打开官方文档去详细阅读.fastapi官网文档链接 创建一个mai ...

  10. Ranger-Sqoop2插件实现详解

    1.组件和插件介绍 1.1.Ranger介绍 Apache Ranger能够监控和管理整个Hadoop平台的综合数据安全, 目前作为Apache Top Level Project(TLP顶级项目), ...