1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形)

 移动:translate            旋转:rotate          缩放:scale

2. 2D 转换之移动 translate

 可以改变元素在页面中的位置,类似定位。

 语法:

  transform:translate(x,y);  或者分开写

  transform:translateX( n );

  transform:translateY( n );

 重点:

  1. 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素

  2. translate 最大的优点:不会影响到其他元素的位置  

  3. translate 中的百分比单位是相对自身元素的translate:(50%,50%);

  4. 对行内标签没有效果

3. 2D 转换之旋转 rotate

 2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。

 语法:

  transform:rotate(度数) 

 重点:

  1. rotate 里面跟度数,单位是 deg 比如 rotate(45deg)

  2. 角度为正时,顺时针,负时,为逆时针

  3. 默认旋转的中心点是元素的中心点

4. 2D转换中心点 transform-origin

 可以设置元素转换的中心点

 语法:

  transform-origin:x   y;

 重点:

  1. 注意后面的参数 x 和 y 用空格隔开

  2. x  y 默认转换的中心点是元素的中心点 (50%   50%)

  3. 还可以给 x y 设置 像素 或者 方位名词(top   bottom  left  right  center)

5. 2D 转换之缩放 scale

 缩放,顾名思义,可以放大和缩小,只要给元素添加上了这个属性,就能控制它放大还是缩小。

 语法:

  transform:scale(x,y);

 重点:

  1. 其中的 x 和 y 用逗号分隔,里面参数是数字,不跟单位,可以是小数

  2. transform:scale(1,1):宽和高都放大一倍,相对于没有放大

  3. transform:scale(2,2):宽和高都放大了2倍

  4. transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

  5. transform:scale(0.5,0.5):缩小

  6. scale 缩放最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

6. 2D 转换综合写法

 注意:

  1. 同时使用多个转换,其格式为:transform:translate()  roate()  scale()  等

  2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)

  3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

css3 新特性(2D translate 移动,rotate 旋转 , scale 缩放)的更多相关文章

  1. CSS3新特性2D、3D效果讲解

    希望这篇博客可以对你有所帮助,如果有什么技术上的问题,希望我们可以做进一步的交流,如果你觉得我哪里阐述的不正确或者你有更好的更透彻的理解,也可以联系我,我在这里随时等着你. 对于css/html是每个 ...

  2. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  3. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  4. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  5. CSS3新特性的概述

    CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...

  6. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  7. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  8. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  9. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  10. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

随机推荐

  1. VS进程附加的使用

    一,附加进程(ctrl+alt+p)调试本地服务器接口(WCF,webapi等)的api 1>接口(WCF,webapi等)的api发布到本地IIS服务器,然后使用附加进程,将你发布的IIS添加 ...

  2. Python二分查找算法

    Python 二分查找算法: 什么是二分查找,二分查找的解释: 二分查找又叫折半查找,二分查找应该属于减值技术的应用,所谓减值法,就是将原问题分成若干个子问题后,利用了规模为n的原问题的解与较小规模( ...

  3. DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3

    在对表load数据之后,表出现如下错误: DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3; 错误解释:表处于"装入暂挂& ...

  4. mysql -- mysql基于ssl的主从复制

    mysql基于ssl的主从复制由于mysql在复制过程中是明文的,所以就大大降低了安全性,因此需要借助于ssl加密来增加其复制的安全性. 主服务器node1:172.16.200.1从服务器node2 ...

  5. 三、TortoiseSVN 单独拉取项目某个文件

    一.项目拉取后,单独对某个文件拉取 实践中会出现这样的问题,在svn 中 我项目 ,已经拉取了,但是 某个文件改乱了 ,想从新对某个文件拉取 . 解决方案:1.删除某个文件,从新更新获取-右击该文件上 ...

  6. JS数字转字符串的方法(number to string)

    一.双点解析 ..toString(); 二.括号先计算再转换 ().toString(); 三.加空串 + ''

  7. [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...

  8. Django Rest框架 APIView源码调用

    上一篇说了请求访问的流程,这一篇说一下请求对应的源码调用 as_view 定义view dispatch dispatch initialize_request get_parsers         ...

  9. [javase基础] JDK JRE JVM的区别?

    JDK Java Development Kit 用作开发, 包含了JRE,编译器和其他的工具(比如: JavaDoc,Java调试器),可以让开发者开发.编译.执行Java应用程序. JRE Jav ...

  10. JDBC中如何进行事务处理?

    Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务:当事务完成后用commit()显式提交事务:如果在事务处理过程中发生异常则通过rollb ...