CSS3的2D转换用transform来实现

1.rotate()   /*通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。*/

2.scal()   /*通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/

3.skew()   /*通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/

4.tanaslate() /*通过 translate() 方法，  元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数*/  相当于relative定位

<style>

#kuang{

    height:50px;

    width:100px;

    border:1px solid red;

    background-color:#C3F;

    }

#kuang11{

    height:50px;

    width:100px;

    border:1px solid red;

    background-color:#6F0;

    margin-top:50px;

    transform:rotate(30deg)

    }

#kuang12{

    height:50px;

    width:100px;

    border:1px solid red;

    background-color:#C00;

    margin-left:150px;

    transform:skew(20deg,40deg)/*表示围绕x轴旋转20度，围绕y轴旋转40度*/

    }

#kuang13 {

    height:50px;

    position:relative;

    width:100px;

    border:1px solid red;

    position:relative;

    background-color:#60C;

    margin-top:100px;

    margin-left:100px;

    transform:scale(2,3)}/*表示宽度是之前的2倍，高度是之前的3倍*/

#kuang14{

    height:50px;

    width:100px;

    position:relative;

    border:1px solid red;

    background-color:#60F;

    transform:translate(50px,100px)}

</style>

<body>

<div id="kuang"></div>

<div id="kuang11"></div>

<div id="kuang12"></div>

<div id="kuang13"></div>

<div id="kuang14"></div>

</body>

效果如图所示：

css3的2D转换的更多相关文章

  1. css3之2D转换

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

  2. 我最喜欢用的css3之2D转换之translate用法

    CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transfor ...

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

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

  4. CSS3的2D 转换——旋转，缩放，translate()，skew()，matrix()

    2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持:   ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀 ...

  5. css3之2D 转换

    浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Chrome 和 Safari 要求 ...

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

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

  7. css3学习总结7--CSS3 2D转换

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换 在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. ...

  8. CSS笔记（十二）CSS3之2D和3D转换

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

  9. CSS3 2D转换

    CSS3 转换 通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是是元素改变形状.尺寸和位置的一种效果. 你可以使用2D或3D转换你的元素. 浏览器支持 属性 浏 ...

随机推荐

  1. IE中Keep-Alive机制引起的错误

    我们知道Http协议是基于TCP/IP连接的,也就是说客户端浏览器向服务器发出一个Http请求并得到响应是要建立一条TCP/IP连接的,但是如果每发出一个Http请求客户端就要向服务器端建立一条TCP ...

  2. .net windows 服务创建、安装、卸载和调试

    原文:http://blog.csdn.net/angle860123/article/details/17375895 windows服务应用程序是一种长期运行在操作系统后台的程序,它对于服务器环境 ...

  3. [Eclipse] - Unicode properties editor

    在properpties文件中使用中文,需要将文件转成unicode. eclipse安装插件:PropertiesEditor 下载地址: http://propedit.sourceforge.j ...

  4. 关于 try catch catch

    catch 和 finally 一起使用的常见方式是:在 try 块中获取并使用资源,在 catch 块中处理异常情况,并在 finally 块中释放资源. public class abc { st ...

  5. [家里蹲大学数学杂志]第235期$L^p$ 调和函数恒为零

    设 $u$ 是 $\bbR^n$ 上的调和函数, 且 $$\bex \sen{u}_{L^p}=\sex{\int_{\bbR^n}|u(y)|^p\rd y}^{1/p}<\infty. \e ...

  6. Bootstrap整体架构

    大多数Bootstrap的使用者都认为Bootstrap只是提供了CSS组件和JavaScript插件,其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已,他们都是构建在 ...

  7. SQL语句 DML,DDL,DCL

    数据控制语言(DCL)是用来设置或者更改数据库用户或角色权限的语句,这些语句包括GRANT.DENY.REVOKE等语句,在默认状态下,只有 sysadmin.dbcreator.db_owner或d ...

  8. 使用Idhttp.get('') 造成假死(堵塞),请问线程idhttp怎么才能做到不出错?

    参考这个帖子 http://blog.csdn.net/chyoma/article/details/50839715

  9. NSIS打包（二）第一个安装包

    基本介绍完之后,我们大概了解了NSIS中有哪些组件,现在我们通过一个简单的demo来学习如何使用这些组件. 1.环境配置 NSIS的环境非常简单,只有一个安装包,安装后即可使用. 官网:http:// ...

  10. 数据结构&算法-双向链表

    1.引言 双向链表原理和单链表差不多,就是操作相对繁琐一些,简单画了几个图,把思想弄清楚就好. 2.正文 这里介绍一下插入和删除的原理,相信这两个操作搞清楚的话,其他操作也没什么问题. 2.1插入节点 ...