/*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. hdu2929 Bigger Is Better

    题意 给出n根木棍,要你拼一个最大的数,并且这个数是m的倍数. 题解 显然越长的数越大.设\(dp[i][j]\)表示用i根木棍并且\(mod m = j\)的最大长度. 我们很容易想出dp方程,再用 ...

  2. <<< 入侵网站思路

    思路: 以下是入侵网站常用方法: 1.上传漏洞 如果看到:选择你要上传的文件 [重新上传]或者出现“请登陆后使用”,80%就有漏洞了! 有时上传不一定会成功,这是因为Cookies不一样.我们就要用W ...

  3. ng-show与ng-if区别

    <p>ng-show and ng-if : </p> <div ng-show="isShow">ng-show是否显示</div> ...

  4. Spring-----定时任务Quartz配置

    第一种,作业类继承自特定的基类:org.springframework.scheduling.quartz.QuartzJobBean. 第一步:定义作业类 import org.quartz.Job ...

  5. 创建面注记PolygonElement

    1.根据4点创建一个面 /// <summary> /// 根据4个点创建图形,点序要顺时针 /// </summary> /// <param name="p ...

  6. Beanutils基本用法

    Beanutils用了魔术般的反射技术,实现了很多夸张有用的功能,都是C/C++时代不敢想的.无论谁的项目,始终一天都会用得上它.我算是后知后觉了,第一回看到它的时候居然错过. 1.属性的动态gett ...

  7. IntersectionObserver API

    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未 ...

  8. Android网络请求通信之Volley

    一.Volley简介 Volley网络框架是Google公司在2013年发布的一款Android平台上的网络请求通信库.以下是对Volley的简单归纳. Volley的优点: 使网络通信更快.更简单. ...

  9. Python_DB_Api

    python DB API 内容 建立连接connection 数据库交互对象cursor 数据库异常类exception 流程 创建connection 获取cursor 执行查询.执行命令.获取数 ...

  10. jvm七种垃圾收集器

    JVM_七种垃圾收集器介绍   本文中的垃圾收集器研究背景为:HotSpot+JDK7 一.垃圾收集器概述 如上图所示,垃圾回收算法一共有7个,3个属于年轻代.三个属于年老代,G1属于横跨年轻代和年老 ...