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. MimeMessageHelper代码发邮件时，通过客服端登陆到邮箱，在已发送邮件里没有已经通过代码发送的邮件

    MimeMessageHelper代码发邮件时,通过客服端登陆到邮箱,在已发送邮件里没有已经通过代码发送的邮件, 这个问题很奇怪,这样的话不能看到通过代码发送的邮件历史记录,所以只好借助秘密抄送了,抄 ...

  2. Linux（Centos） 设置显示vim行号

    1.修改vimrc文件 vim /etc/vimrc 2.在最后添加 set nu 如下图片所示 然后wq! 保存退出

  3. jQuery Validate验证(判断)某个字段是否通过验证

    jQuery Validate 默认只能判断整个表单是否验证通过,但是有时候我们需要对某个字段进行判断 ,可以使用以下方法 var bool=$("整个form表单的ID").va ...

  4. AQS的原理及源码分析

    AQS是什么 AQS= volatile修饰的state变量(同步状态) +FIFO队列(CLH改善版的虚拟双向队列,用于阻塞等待唤醒机制) 队列里维护的Node节点主要包含:等待状态waitStat ...

  5. 【LeetCode】4. Median of Two Sorted Arrays 寻找两个正序数组的中位数

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:数组,中位数,题解,leetcode, 力扣,python ...

  6. sql-labs 1-14

    less-1: 1.采用二分法进行猜列: http://192.236.147.191:30000/Less-1/?id=1' order by 10--+ Welcome    Dhakkan Un ...

  7. 深入理解Java虚拟机二：垃圾收集与内存分配

    垃圾收集:垃圾收集要完成三件事,包括哪些内存需要回收,什么时候回收及如何回收. 1.需要回收的内存判定:没有引用指向原先分配给某个对象的内存时,则该内存是需要回收的垃圾 Java垃圾收集器在对内存进行 ...

  8. Redisson分布式锁学习总结：可重入锁 RedissonLock#lock 获取锁源码分析

    原文:Redisson分布式锁学习总结:可重入锁 RedissonLock#lock 获取锁源码分析 一.RedissonLock#lock 源码分析 1.根据锁key计算出 slot,一个slot对 ...

  9. CSS基础 CSS的三大特性以及选择器优先级计算方法

    1.子元素默认会继承父元素的样式,但不是所有的元素都有继承 常见的继承父元素特点的元素有: 1.color 2.font-sytle.font-weight.font-size.font-family ...

  10. 初识python之词组截取及翻译

    d = {} k = [] v = [] with open('dir','r',encoding='utf-8') as f: for i in f.readlines(): j = i.strip ...