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. c++ poco库https调用

    #include "Poco\File.h"#include "Poco\FileStream.h"#include "Poco\Process.h& ...

  2. How to Allow MySQL Client to Connect to Remote MySql

    How to Allow MySQL Client to Connect to Remote MySQ By default, MySQL does not allow remote clients ...

  3. 如何解决虚拟机克隆导致"Bringing up interface eth0: Error: No suitable device found: no device found for connection 'System eth0'."

    在VMware的虚拟机中克隆CentOS,在重启网卡的时候报错: Bringing up interface eth0:  Error: No suitable device found: no de ...

  4. 【转载-好文】使用 Spring 2.5 注释驱动的 IoC 功能

    在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 原文链接:https://www.ibm.com/developerworks/cn/java/j-lo-spring25 ...

  5. Apache Shiro 使用手册（四）Realm 实现

    在认证.授权内部实现机制中都有提到,最终处理都将交给Real进行处理.因为在Shiro中,最终是通过Realm来获取应用程序中的用户.角色及权限信息的.通常情况下,在Realm中会直接从我们的数据源中 ...

  6. windows下python3.4安装scikit-learn

    python3.4.0_64位下安装numpy-1.11.1 安装步骤: ​1.在终端CMD中输入: python -m pip install -U pip​​ 2.找到 下载的 numpy-1.1 ...

  7. X-Cart 学习笔记（四）常见操作

    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...

  8. python socket 常见方法及 简单服务/客户端

    socket 常见方法: 补充说明:what is file descriptor? 文件描述符是什么? 参考(http://stackoverflow.com/questions/8191905/w ...

  9. iOS官方Sample大全

    转载自:http://blog.csdn.net/yangtb2010/article/details/7005471 http://developer.apple.com/library/ios/s ...

  10. Linux下的shell编程（一）BY 四喜三顺

    Ctrl + Alt + Tvim文本编辑器:i(插入模式),v(可视模式),Esc(普通模式),:w(保存),:r(打开),:q(退出)gvim 文本编辑器vim的升级版gedit 更常用的文本编辑 ...