通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状、尺寸和位置的一种效果。

注:Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

属性transform,其值有以下四种:

1,translate()

通过 translate(  px,  px) 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。

2,rotate()

通过 rotate(  deg) 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

3,scale()

通过 scale(n,n) 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。元素尺寸放大,缩小。

4,skew()

通过 skew(  deg,  deg) 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。

CSS3中的2D转换的更多相关文章

  1. css3 中的2D转换

    一.CSS3转换 通过转换实现对对元素进行旋转.缩放.移动.拉伸的效果:这种原来必须要通过JS或者图片处理才可以实现的效果,现在都可以通过CSS3来完成. 2D转换采用transform属性来实现效果 ...

  2. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  3. CSS3中的2D和3D转换知识介绍

    一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...

  4. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  5. CSS3如何实现2D转换和3D转换,他们有何区别

    CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...

  6. CC3中的2D转换

    2D转换方法: translate() rotate() scale() skew() matrix() 1.translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 ...

  7. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  8. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

随机推荐

  1. Java中Double类型计算问题

    public class Test{    public static void main(String args[]){        System.out.println(0.05+0.01);  ...

  2. [troubleshoot][archlinux][X] GPU HANG

    前言:如下内容已经是在hang完大概半个多月后了,当时想写,一直没过来写,写blog果然也是已经花费时间的事情. 最近一直在休假,电脑的使用频率也不多.后来还是为了生活,不情愿的去开始上班了,上班的第 ...

  3. Java 操作符

    子系统的特点 instanceof 操作符 Animal类是Dog的直接父类,Creature类和Object类是Dog的间接父类,因此 Dog dog=new Dog(); System.out.p ...

  4. Maven-001-初识及本地环境配置

    前段时间想对自己之前写的一些代码或者小工具,因为写的比较乱,因而想系统的管理一下自己学习 Java 时写的源码,经过多方请教.网上查询,最终决定使用 Maven 来管理自己写的代码. Maven 是一 ...

  5. VMware安装的相关文章

    1.在虚拟机中安装CentOS7(百度文库) 2.VM虚拟机下安装Centos7.0图文教程(centos中文站) 2016年8月10日11:30:03

  6. zabbix的一些优化参数随笔

    StartDBSyncers=12  如果proxy过多 可以适当加大这个参数 ProxyConfigFrequency=60ProxyDataFrequency=60 这两个参数很重要,一个是ser ...

  7. MVC中的视图

    视图的作用: 检查由路由器提交的模型对象, 将其内容转换为HTML格式. 指定视图的两种方式, 代码如下: return View("NotIndex"); return View ...

  8. WebViewClient shouldOverrideUrlLoading 常见错误用法

    需求描述 在使用 WebView 的项目中,一个常见的需求是将页面内的链接跳转限制在 WebView 内,而不是使用外部浏览器打开,但 WebView 的默认行为是将链接点击事件作为 Intent 发 ...

  9. MC, MCMC, Gibbs采样 原理&实现(in R)

    本文用讲一下指定分布的随机抽样方法:MC(Monte Carlo), MC(Markov Chain), MCMC(Markov Chain Monte Carlo)的基本原理,并用R语言实现了几个例 ...

  10. spring1冲刺感想与总结

    感想与体会: 通过团队合作的第一个sprint,我们知道如何在团队合作中做好自己,还有与队友不合时,如何和平处理问题.产品负责人是一个重要的的角色,他负责任务的安排,处理合作中意见不统一的问题.通过这 ...