/*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. 裁剪要素出现错误 :HRESULT:0x80040239

    pFeatureBuffer = pOutFeaCls.CreateFeatureBuffer();                 pFeatureCursor = pOutFeaCls.Inser ...

  2. Google Map API Version3 :代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  3. 简单的c# TCP通讯(TcpListener)

      简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TC ...

  4. linux系统下修改文件夹目录权限

    linux系统下修改文件夹目录权限 文件夹权限问题 Linux.Fedora.Ubuntu修改文件.文件夹权限的方法差不多.很多人开始接触Linux时都很头痛Linux的文件权限问题.这里告诉大家如何 ...

  5. DD_belatedPNG.js解决透明PNG图片背景灰色问题

    <!--[]> <script type="text/javascript" src="http://www.phpddt.com/usr/themes ...

  6. zend studio汉化

    在help菜单中选择Install New Software,在 work with栏中添加上这样的地址 http://archive.eclipse.org/technology/babel/upd ...

  7. [nosql之缓存memcache]安装篇LInux for Windows

    首先呢在PHP开发的过程中会用到很多缓存服务,从而提升访问质量或者临时存储一些数据. 优点 结构简单,读取速度快,易于维护.还有一些特性memcache redis mongodb都可以用来做为缓存用 ...

  8. AndroidStudio使用笔记

    声明: 正式放弃Eclipse,投奔AndoidStudio大军,有些东西要从头摸索,特发此帖记录Android Studio的使用方法.本帖永久更新,不定时记录本人使用过程中的经验积累,给自己留一份 ...

  9. CentOS6.3编译安装Memcached

    要用到如下源码包: /usr/local/src/memcached/libevent-2.0.21-stable.tar.gz /usr/local/src/memcached/memcached- ...

  10. Qt StyleSheet皮肤css源码

    使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...