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. Xftp设置指定记事本（notepad++）打开文件

    右键

  2. git clone报错： Out of memory, malloc failed (tried to allocate 524288000 bytes)

    IDEA 拉取项目报错:Out of memory, malloc failed (tried to allocate 524288000 bytes) 执行 git config --global ...

  3. 【九度OJ】题目1435：迷瘴 解题报告

    [九度OJ]题目1435:迷瘴 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1435 题目描述: 通过悬崖的yifenfei,又面临 ...

  4. 1002 - Country Roads（light oj）

    1002 - Country Roads I am going to my home. There are many cities and many bi-directional roads betw ...

  5. window11连接局域网共享失败处理办法

    第一步1.按 Win + R 组合键,打开运行,并输入:gpedit.msc 命令,确定或回车,可以快速打开本地组策略编辑器2.本地组策略编辑器窗口中,依次展开到:计算机配置 - 管理模板 - 网络 ...

  6. 使用.NET 6开发TodoList应用(9)——实现PUT请求

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 PUT请求本身其实可说的并不多,过程也和创建基本类似.在这篇文章中,重点是填上之前文章里留的一个坑,我们曾经给TodoItem ...

  7. Hive SQL优化思路

    Hive的优化主要分为:配置优化.SQL语句优化.任务优化等方案.其中在开发过程中主要涉及到的可能是SQL优化这块. 优化的核心思想是: 减少数据量(例如分区.列剪裁) 避免数据倾斜(例如加参数.Ke ...

  8. Spring Boot + MyBatis + MySQL 实现读写分离

    读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行,至于谁来做选择数据库这件事儿,无非两个,要么中间件帮我们做,要么程序自己做. 读写分离有两种实现方式: 第一种是依靠中间件(比如:MyCat ...

  9. C++ switch 语句的用法

    C++ 判断 一个 switch 语句允许测试一个变量等于多个值时的情况.每个值称为一个 case,且被测试的变量会对每个 switch case 进行检查. C++ 中 switch 语句的语法: ...

  10. Oracle 11g安装和PL/SQL连接完全解读（连接本地数据库）

    Oracle安装是很多新手都烦恼的事情,各种奇怪的错误,并且还无从下手解决.我也隔了两年没有用Oracle了,昨天安装了一下,出现很多问题,也很苦恼.现在将安装过程详细记录下来,一来方便自己下次安装, ...