1.html

 <div class="translate">1</div>
<div class="scale">2</div>
<div class="rotate">3</div>
<div class="skew">4</div>

2.css和介绍

     <style>
*{
margin:;
padding:;
}
.translate,.scale,.rotate,.skew{
width: 100px;
height: 100px;
background-color: #ff1a23;
margin-left: 200px;
transition: transform 2s;
margin-bottom: 20px;
}
/*移动:translate */
.translate:active{
/*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
1.如果只有一个参数就代表x方向
2.如果两个参数就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(200px,100px);*/
/*添加水平方向或处置方向的移动*/
/*transform: translateX(300px);*/
transform: translateY(300px);
} /*缩放:translate*/
.scale:active{
/*实现缩放 1指不缩放,>1放大 <1缩小 参照元素的几何中心
1.如果只是一个参数,就代表x和y方向都进行相等比例的缩放
2.如果有两个参数,就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*缩放指定的方向*/
/*transform: scaleX(0.5);*/
transform: scaleY(0.5); } /*旋转:rotate*/
.rotate:hover{ /*设置旋转轴心
1.x y
2.transform-origin:left top right bottom center*/
/*transform-origin: left top;*/ /*正数为顺时针旋转,负数为逆时针旋转*/
/*transform: rotate(30deg);*/ /*旋转加移动*/
transform: translateX(700px) rotate(180deg);
/*建议使用上一种顺序添加*/
/*transform: rotate(-90deg) translateX(700px);*/
} /*斜切:skew*/
.skew:hover{
/*若果角度为证,则网当前轴的负方向斜切,反之则反*/
/*transform: skew(30deg);*/
/*transform: skew(30deg,-50deg);*/
/*设置某个方向的斜切值*/
/*transform: skewX(30deg);*/
transform: skewY(30deg); }
</style>

h5-transform二维变换的更多相关文章

  1. UWP开发-二维变换以及三维变换

    在开发中,由于某些需求,我们可能需要做一些平移,缩放,旋转甚至三维变换,所以我来讲讲在UWP中这些变换的实现方法. 一. 二维变换: UIElement.RenderTransform a.Trans ...

  2. H5生成二维码

    要用H5生成二维码: 1.引入js库,可自行点击链接复制使用 <script type="text/javascript" src="http://static.r ...

  3. angularjs+ionic+'h5+'实现二维码扫描功能

    今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...

  4. .net Core 调用微信Jsapi接口,H5解析二维码

    项目里需要用到扫描二维码,自己实现,不会. 找到了两种解决方案: 通过reqrcode.js,这是一个前端解析二维码内容的js库.如果二维码比较清晰,用这种效果也不错 调用微信扫一扫功能,这种效果很好 ...

  5. h5-transform二维变换-盾牌还原案例

    就是8张盾牌的拼图 1 <div class="transforms"> <img src="../img/dp1.png" alt=&quo ...

  6. h5-transform二维变换-扑克牌小案例

    html代码:6张扑克牌 <div class="pkBox"> <img src="../img/pk1.jpg" alt="&q ...

  7. h5 扫描二维码打开app和点击下载功能的实现

    window.onload = function () { jumpToapp() } var browser = { isAndroid: function () { return navigato ...

  8. 二维DCT变换 | Python实现

    引言 最近专业课在学信息隐藏与数字水印,上到了变换域隐藏技术,提到了其中的DCT变换,遂布置了一个巨烦人的作业,让手动给两个\(8\times8\)的矩阵做二维DCT变换,在苦逼的算了一小时后,我决定 ...

  9. H5混合开发二维码扫描以及调用本地摄像头

    今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...

随机推荐

  1. 我的博客 Hexo 还是Jekyll

    我的博客 Hexo 还是Jekyll 标签(空格分隔): 博客 很喜欢找一些博客主题,目前发现几个比较不错的 Hexo: 阿里中间件 我的个人博客-Material主题 我的个人博客-Fluid主题 ...

  2. 060、Java中定义有返回值有参数的方法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  3. Ubuntu1804 双网卡的设置

    在WIFI模式下,既可以使用ping开发板,又可上网.     目标:ubuntu1804下使用两个网卡 网卡(eth0):用于桥接主机的物理网卡 网卡(eth1):用于NAT模式下共享主机IP,用于 ...

  4. Linux学习-预习第五六七章节关于用户权限管理以及磁盘文件系统

  5. python面试题整理(二)

    1.进程,线程,协程定义,有什么区别 进程是操作系统分配资源的最小单位,一个进程对应一块CPU 线程是进程中的某一个控制单元,是CPU调度的最小单元,线程之间相互独立,进程结束线程也会结束,一个进程至 ...

  6. Flask—路由的注册方法

    第一种注册方法 from flask import Flask app = Flask(__name__) @app.route("/hello") # 第一种注册方法 def h ...

  7. Go语言 一维数组的使用

    程序源码 package main import ( "fmt" // 导入 fmt 包,打印字符串是需要用到 ) func main() { // 声明 main 主函数 var ...

  8. List实体类、DataTable与xml互转

    序列化常用Attribute讲解说明 [XmlRootAttribute("MyCity", Namespace="abc.abc", IsNullable=f ...

  9. HDU 4952 Number Transformation 多校8 机智数学

    哎.这个题想了好久,状态不对啊...一个大家都出的题..当时想到肯定是可以有什么规律来暴力,不用算到10的10次方 对于某个k,x.从1到k循环,每次求一个新的x,这个x要大于等于原x,并且要是i的倍 ...

  10. 留学生如何完成一篇高质量的Essay?

    本文将以典型的essay写作结构作为框架, 分别介绍如何审题.构思.立意, 如何高效地收集有效的资料, 如何撰写, 如何规范参考文献格式等. 审题&构思&立意定题 审题 一年之计在于春 ...