CSS3的2D转换用transform来实现

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

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

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

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

  1. <style>
  2.  
  3. #kuang{
  4.     height:50px;
  5.     width:100px;
  6.     border:1px solid red;
  7.     background-color:#C3F;
  8.     }
  9. #kuang11{
  10.     height:50px;
  11.     width:100px;
  12.     border:1px solid red;
  13.     background-color:#6F0;
  14.     margin-top:50px;
  15.     transform:rotate(30deg)
  16.     }
  17. #kuang12{
  18.     height:50px;
  19.     width:100px;
  20.     border:1px solid red;
  21.     background-color:#C00;
  22.     margin-left:150px;
  23.     transform:skew(20deg,40deg)/*表示围绕x轴旋转20度，围绕y轴旋转40度*/
  24.     }
  25. #kuang13 {
  26.     height:50px;
  27.     position:relative;
  28.     width:100px;
  29.     border:1px solid red;
  30.     position:relative;
  31.     background-color:#60C;
  32.     margin-top:100px;
  33.     margin-left:100px;
  34.     transform:scale(2,3)}/*表示宽度是之前的2倍，高度是之前的3倍*/
  35. #kuang14{
  36.     height:50px;
  37.     width:100px;
  38.     position:relative;
  39.     border:1px solid red;
  40.     background-color:#60F;
  41.     transform:translate(50px,100px)}
  42.  
  43. </style>
  44. <body>
  45.  
  46. <div id="kuang"></div>
  47. <div id="kuang11"></div>
  48. <div id="kuang12"></div>
  49. <div id="kuang13"></div>
  50. <div id="kuang14"></div>
  51. </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. hbase-architecture

    https://www.mapr.com/blog/in-depth-look-hbase-architecture http://stackoverflow.com/questions/400679 ...

  2. Keepalived 双机热备

    使用 Keepalived 做双机热备非常简单,经常和 LVS 搭配来实现高可用负载平衡方案. 1. Master / Slave 首先准备两台测试服务器和一个虚拟IP. Server A: 192. ...

  3. 关于初次使用Verilog HDL语言需要懂的基本语法

    关于初次使用Verilog HDL语言需要懂的基本语法 1.常量 数字表达式全面的描述方式为:<位宽><进制><数字> 8’b10101100,表示位宽为8的二进制 ...

  4. 【uTenux实验】集合点端口

    这个是头一次接触的概念.比较不好理解.内核规范中的说明就要20页! 看了王总写的uTenux内核规范之后,有那么一点明白了但理解不深. 集合点端口就像每次工作前的收集情况会.首长下达收集情况指令,各个 ...

  5. PHPMyAdmin 显示缺mysqli 扩展的解决方法

    今天在学PHP100视频教程时,装了phpMyAdmin.一开始下载的是最新版本phpMyAdmin-4.1.4-all-languages, 直接500错误,页面怎么也打不开.我用的PHP版本是老版 ...

  6. XAMPP（Linux版-x86兼容）官网下载

    欢迎光临 XAMPP 的 Linux 版 (x86 兼容处理器版)顺便提一下:该软件以前被称作 LAMPP,但为了避免误解,我们将其重名命为 »XAMPP 的 Linux 版«.所以,如果您在寻找 L ...

  7. log4net 发布到生产环境不写日志的解决方法--使用 NLog日志

    1.升级到log4net的最新版 PM下执行 Install-Package log4net 还是无法解决的,使用下面的方法 2.使用Nlog替换之,详见https://github.com/NLog ...

  8. NGUI之渲染DrawCall的合并

    在Unity中,每次引擎准备数据并通知GPU的过程称为一次Draw Call.Draw Call值越低,会得到更好的渲染性能. (NGUI 查看DrawCall工具(NGUI-OPEN-Draw Ca ...

  9. IOS 关于扬声器和听话筒的设置 ----自己试验过的，可以达到扩音器和听筒播放的效果

    今下午项目中使用到了 扬声器和听筒的设置,我项目中是这样的,有一个聊天设置,聊天设置有一个使用扬声器 播放声音的设置. 这个设置是,当你打开那个开关的话,你在聊天中都可以根据你的使用来任意的播放声音, ...

  10. php 向asmx发送请求 || php 发送xml请求， 以及处理返回的xml结果

    var $live_url = 'https://processing.ukash.com/RPPGateway/process.asmx'; $source = array( 'SecurityTo ...