/*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. XML 架构 (XSD) 参考

    https://msdn.microsoft.com/zh-cn/library/ms256235.aspx XML 架构示例 XML 架构元素 XML 数据类型引用 XML 架构正则表达式 XML ...

  2. cxf 调用 webservice服务时传递 服务器验证需要的用户名密码

    cxf通过wsdl2java生成客户端调用webservice时,如果服务器端需要通过用户名和密码验证,则客户端必须传递验证所必须的用户名和密码,刚开始想通过url传递用户名和密码,于是在wsdl文件 ...

  3. sde用户下使用sqlplus登录错误ORA-12547: TNS:lost contact

    环境:linux + oracle +arcsde   解决:root用户下增加$ORACLE_HOME/bin/oracle文件的s权限 [oracle@localhost bin]$ chmod ...

  4. ThinkPhP 分页

    <?php namespace User\Service; use Think\Controller; use Think\Exception; class UserService { // 每 ...

  5. 反射的一些用法(WP8.1下)

    我初步的理解:反射就是动态调用(dll)类. 比如某个dll有一个类,通过反射就可以知道它里面属性.方法,就可以实现调用. 确实,dll可以直接引用,但是如果遇到这种情况: 添加.删除功能同属一个Dl ...

  6. Java类名.class和getClass()区别

    区别 类名.class叫做“类字面量”,因class是关键字, 所以类名.class编译时确定. getclass()运行时根据实际实例确定,getClass()是动态而且是final的. Strin ...

  7. chrome浏览器跨域设置

    1.新建快捷方式,在目标那里的路径后面跟上如下参数 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -- ...

  8. nginx负载均衡基于ip_hash的session粘帖

    nginx负载均衡基于ip_hash的session粘帖 nginx可以根据客户端IP进行负载均衡,在upstream里设置ip_hash,就可以针对同一个C类地址段中的客户端选择同一个后端服务器,除 ...

  9. 阿里云部署Java web项目初体验(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何在阿里云上安装JDK.Tomcat以及其配置过程.最后以一个实例来演示在 ...

  10. libcpmt.lib 与 msvcprt.lib

    https://msdn.microsoft.com/en-us/library/2kzt1wy3(VS.80).aspx