h5-transform二维变换
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二维变换的更多相关文章
- UWP开发-二维变换以及三维变换
在开发中,由于某些需求,我们可能需要做一些平移,缩放,旋转甚至三维变换,所以我来讲讲在UWP中这些变换的实现方法. 一. 二维变换: UIElement.RenderTransform a.Trans ...
- H5生成二维码
要用H5生成二维码: 1.引入js库,可自行点击链接复制使用 <script type="text/javascript" src="http://static.r ...
- angularjs+ionic+'h5+'实现二维码扫描功能
今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...
- .net Core 调用微信Jsapi接口,H5解析二维码
项目里需要用到扫描二维码,自己实现,不会. 找到了两种解决方案: 通过reqrcode.js,这是一个前端解析二维码内容的js库.如果二维码比较清晰,用这种效果也不错 调用微信扫一扫功能,这种效果很好 ...
- h5-transform二维变换-盾牌还原案例
就是8张盾牌的拼图 1 <div class="transforms"> <img src="../img/dp1.png" alt=&quo ...
- h5-transform二维变换-扑克牌小案例
html代码:6张扑克牌 <div class="pkBox"> <img src="../img/pk1.jpg" alt="&q ...
- h5 扫描二维码打开app和点击下载功能的实现
window.onload = function () { jumpToapp() } var browser = { isAndroid: function () { return navigato ...
- 二维DCT变换 | Python实现
引言 最近专业课在学信息隐藏与数字水印,上到了变换域隐藏技术,提到了其中的DCT变换,遂布置了一个巨烦人的作业,让手动给两个\(8\times8\)的矩阵做二维DCT变换,在苦逼的算了一小时后,我决定 ...
- H5混合开发二维码扫描以及调用本地摄像头
今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...
随机推荐
- 我的博客 Hexo 还是Jekyll
我的博客 Hexo 还是Jekyll 标签(空格分隔): 博客 很喜欢找一些博客主题,目前发现几个比较不错的 Hexo: 阿里中间件 我的个人博客-Material主题 我的个人博客-Fluid主题 ...
- 060、Java中定义有返回值有参数的方法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Ubuntu1804 双网卡的设置
在WIFI模式下,既可以使用ping开发板,又可上网. 目标:ubuntu1804下使用两个网卡 网卡(eth0):用于桥接主机的物理网卡 网卡(eth1):用于NAT模式下共享主机IP,用于 ...
- Linux学习-预习第五六七章节关于用户权限管理以及磁盘文件系统
- python面试题整理(二)
1.进程,线程,协程定义,有什么区别 进程是操作系统分配资源的最小单位,一个进程对应一块CPU 线程是进程中的某一个控制单元,是CPU调度的最小单元,线程之间相互独立,进程结束线程也会结束,一个进程至 ...
- Flask—路由的注册方法
第一种注册方法 from flask import Flask app = Flask(__name__) @app.route("/hello") # 第一种注册方法 def h ...
- Go语言 一维数组的使用
程序源码 package main import ( "fmt" // 导入 fmt 包,打印字符串是需要用到 ) func main() { // 声明 main 主函数 var ...
- List实体类、DataTable与xml互转
序列化常用Attribute讲解说明 [XmlRootAttribute("MyCity", Namespace="abc.abc", IsNullable=f ...
- HDU 4952 Number Transformation 多校8 机智数学
哎.这个题想了好久,状态不对啊...一个大家都出的题..当时想到肯定是可以有什么规律来暴力,不用算到10的10次方 对于某个k,x.从1到k循环,每次求一个新的x,这个x要大于等于原x,并且要是i的倍 ...
- 留学生如何完成一篇高质量的Essay?
本文将以典型的essay写作结构作为框架, 分别介绍如何审题.构思.立意, 如何高效地收集有效的资料, 如何撰写, 如何规范参考文献格式等. 审题&构思&立意定题 审题 一年之计在于春 ...