/*2D的转换*/

位移
-webkit-transform: translate(10px, 10px)
缩放
-webkit-transform: scale(.5, .5)
重置原点
-webkit-transform-origin: 50px 0

旋转: deg表示度数
-webkit-transform: rotate(1rad)

斜切,扭曲
-webkit-transform: skew(1rad, 1rad)

例如:
<div class="out">
<div class="inner"> 测试</div>

</div>
CSS:

.out {
width: 300px;
height: 300px;
background-color: #999999;
padding: 1px;
}

.inner {
margin: 150px;
width: 100px;
height: 100px;
background-color: #21bbca;
-webkit-transform: translate(10px, 10px);

}

七月十三号CSS3总结《2D的转换》的更多相关文章

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

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

  2. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  3. css3的2D转换

    CSS3的2D转换用transform来实现 1.rotate()   /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal()   /*通过 s ...

  4. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  5. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  6. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  7. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  8. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  9. PADS导入DXF板框,不能将开放的2D线转换成闭合的板框错误

    刚开始学会用PADS,学习的时候都是在PADS里手绘一个板框的.然后实际项目中,都是需要导入结构DXF板框文件,第一次导入就发现了问题. 第一次导入DXF后,需要将DXF转换为板框,但提示 “不能将开 ...

随机推荐

  1. 对前端的一个H5项目的所思所想

    最近接触一个前端HTML5的项目,虽然我主做iOS,但曾经也徒手用html+css+js+php写过一个博客,当然表示无压力了.结果.现在的前端发展的速度真是快啊,项目中用到Jquery,reactJ ...

  2. 创建线注记LineElement

    1.根据2点创建一条线 /// <summary> /// 创建线 /// </summary> /// <param name="pnt1"> ...

  3. Java排序算法——桶排序

    文字部分为转载:http://hxraid.iteye.com/blog/647759 对N个关键字进行桶排序的时间复杂度分为两个部分: (1) 循环计算每个关键字的桶映射函数,这个时间复杂度是O(N ...

  4. vim 支持C++11 lambda表达式

    http://www.vim.org/scripts/script.php?script_id=3797 Tar contains just the required .vim files, so u ...

  5. WebApplicationInitializer (spring 3.x.x以上版本)

    实现WebApplicationinitializer接口的类都可以在web应用程序启动时被加载. 那么来想一个问题:为什么实现了WebApplicationInitializer这个接口后,onSt ...

  6. [NHibernate]并发控制

    目录 写在前面 文档与系列文章 并发控制 乐观并发控制(Optimistic Concurrency) 一个例子 悲观并发控制(Pessimistic Concurrency) 总结 写在前面 上篇文 ...

  7. [UML]UML系列——类图class的依赖关系

    相关文章          [UML]UML系列——用例图Use Case       [UML]UML系列——用例图中的各种关系(include.extend)       [UML]UML系列—— ...

  8. CentOS6.3安装MongoDB2.2 及 安装PHP的MongoDB客户端

    下载源码:(放到 /usr/local/src 目录下) 到官网 http://www.mongodb.org/downloads 下载源码 https://fastdl.mongodb.org/li ...

  9. Shell入门教程:流程控制(4)case 条件判断

    case的语法结构: case 待测项 in 样式串1] 命令区域1 ;; (样式串2) 命令区域2 ;; 样式串3) 命令区域3 ;; *) 命令区域 ;; esac 命令区域,可以是单一指令或多行 ...

  10. win7无法保存打印机设置(错误0x000006d9)解决方法

    解决win7打印机共享出现‘无法保存打印机设置’操作无法完成(错误0x000006d9),接下来与大家分享下解决方法, 找到windows firewall服务,启用即可 ============== ...