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. Java面试宝典(3)Java基础部分

    51.启动一个线程是用run()还是start()? . 启动一个线程是调用start()方法,使线程就绪状态,以后可以被调度为运行状态,一个线程必须关联一些具体的执行代码,run()方法是该线程所关 ...

  2. windows10图形化连接CentOS7

    前提:CentOS已经安装图形化,安装教程可以百度 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 安装 ...

  3. webpack从入门到精通(一)

    1.webpack的使用背景: 目前国内前端开发都是基于模块化的 2.webpack的作用有哪些: 3.webpack四大核心理念: entry,output,loaders,plugins 4.使用 ...

  4. 【知识强化】第四章 网络层 4.7 IP组播

    这节课我们来学习一下IP组播. 首先我们来看这样一个问题,IP数据报在网络当中传输的时候,有几种传输方式呢?三种,分别是单播.广播和组播(多播).这个组播呢也叫做多播,它们俩是一个意思.那这个组播是由 ...

  5. BlueStore-先进的用户态文件系统《一》

    https://zhuanlan.zhihu.com/p/45084771 分布式存储系统通过将数据分散到多台机器上来充分利用多台机器的资源提高系统的存储能力,每台机器上的数据存放都需要本地的单机存储 ...

  6. Python深度学习

    序言 目的驱动型学习 概念解释 资料 https://www.tensorflow.org/ https://www.imooc.com/video/17186 https://www.cnblogs ...

  7. One Switch for Mac 一键切换系统各项功能

        One Switch 是火球工作室推出的最新 Mac效率软件,它在 Menubar 菜单里集成了隐藏桌面(图标).切换 Dark Mode.保持亮屏.开启屏保的一键切换按钮,将以往这些以独立小 ...

  8. [bzoj3733]Iloczyn 题解(搜索剪枝)

    3733: [Pa2013]Iloczyn Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 741  Solved: 217[Submit][Statu ...

  9. 微信公众号的SpringBoot+Quartz的定时任务Demo

    SpringBoot整合quartz并不难,难在普通类实现了Job接口后等于实例化交给quartz,不受Spring管理,则service层等等其他依赖的注入将无法注入,这也是难点之一. 解决方法: ...

  10. 58、salesforce学习笔记(五)

    Set集合 Set<String> set1 = new Set<String>(); set1.add('1'); set1.add('2'); Set<String& ...