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. IDEA设置默认(指定)的注释作者信息

    有时候我们想在IDEA里面创建的时候就默认设置一个指定的作者信息 填入作者信息 然后点击ok /** * * @author yvioo */ 然后我们新建文件的时候就会自动带上这个了,模板可以根据自 ...

  2. RPA账户和密码管理方案

    如何将登录业务系统的账户和密码"更好的,更合适"地交给RPA? 相信很多小伙伴们在做RPA的时候, 都会或多或少的遇到类似的问题. 正常情况下IT管理人员都会给真实的业务人员分配业 ...

  3. windows10 下使用 spdlog 总结（spdlog 1.7）

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 注意: 请选择对c++11 支持 完善的编译器, 为什么vs2013不行,因为: spdlo ...

  4. C++ 获取函数耗时

    C++ 记录耗时 #include <sys/timeb.h> #include <stdio.h> long long getSystemTime() { struct ti ...

  5. 【LeetCode】388. Longest Absolute File Path 解题报告（Python）

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

  6. 重重封锁，让你一条数据都拿不到《死磕MySQL系列 十三》

    在开发中有遇到很简单的SQL却执行的非常慢,甚至只查询一行数据. 咔咔遇到的只有两种情况,一种是MySQL服务器CPU占用率很高,所有的SQL都执行的很慢直到超时,程序也直接502,另一种情况是行锁造 ...

  7. Nginx应用场景配置

    Nginx应用全入门 基础回顾 Nginx是什么? Nginx是一个高性能的HTTP和反向代理web服务器,特点是内存少,并发能力强 Nginx能做什么 Http服务器(Web服务器) 反向代理服务器 ...

  8. 如何在 Go 中将 []byte 转换为 io.Reader？

    原文链接: 如何在 Go 中将 []byte 转换为 io.Reader? 在 stackoverflow 上看到一个问题,题主进行了一个网络请求,接口返回的是 []byte.如果想要将其转换成 io ...

  9. Springcloud-alibaba学习实践（2）- nacos&Eureka Server服务注册实践

    前言:上一篇已搭建好了springcloud服务注册中心(Nacos&Eureka Server),本篇继续代码实践,注册服务到服务中心,本篇只是演示了两种注册中心,后续我们以Nacos注册中 ...

  10. Swoole 进程管理模块 Process 之单进程的使用

    PHP 自带的 pcntl,存在很多不足,如: 没有提供进程间通信的功能: 不支持重定向标准输入和输出: 只提供了 fork 这样原始的接口,容易使用错误: Swoole\Process 提供了如下特 ...