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. 棋盘问题(DFS)& Dungeon Master (BFS)

    1棋盘问题 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的 ...

  2. html中a标签伪类的优先级与顺序

    /** 这四个伪类的优先级相同,前一个会覆盖后一个 建议书写顺序: lvha => love hate(好记) */ a:link { color: red; } a:visited { col ...

  3. 获取年月日格式为yyyy-m-d简单写法

    方法:通过日期函数toLocaleString()获取.new Date().toLocaleString( );  //"2019/9/1 上午11:20:23" 获取年月日方法 ...

  4. shell变量及相关命令

  5. InnoDB不支持contains等

    并非所有引擎都支持全文本搜索MySQL.与所有其他的DBMS一样,MySQL具有一个具体管理和处理数据的内部引擎.在你使用CREATE TABLE语句时,该引擎具体创建表,而在你使用SELECT语句或 ...

  6. Nginx Web 基础入门

    目录 Nginx Web 基础入门 Nginx快速安装 两种方式部署Nginx 如何升级nginx或者添加功能 使用systemd管理nginx nginx相关配置文件 nginx的配置文件详解 虚拟 ...

  7. [js测试]JavaScript Web Quiz By davidshariff

    Question1 var foo = function foo() { console.log(foo === foo); }; foo(); 输出是"true",因为foo就指 ...

  8. 力扣——3sum closest(最接近的三数之和)python 实现

    题目描述: 中文: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一 ...

  9. python中二维数组的建立,输入和输出

    ''' for循环: for i in range(x,y,dir): pass 首先这个区间是左闭右开 其次dir在省略的情况下默认为1,就是每次加一,也可以指定 python的数组: python ...

  10. codeblocks编译调试C语言二级指针小记

    夜已深,暂时附上一个截图,后面慢慢道来. 下图时用codeblocks调试C语言的界面,codeblocks版本是17.12nosetup版,也为继承mingw,我用的编程器是tdm-gcc-5.1. ...