css3 新特性(2D translate 移动,rotate 旋转 , scale 缩放)
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 缩放)的更多相关文章
- CSS3新特性2D、3D效果讲解
希望这篇博客可以对你有所帮助,如果有什么技术上的问题,希望我们可以做进一步的交流,如果你觉得我哪里阐述的不正确或者你有更好的更透彻的理解,也可以联系我,我在这里随时等着你. 对于css/html是每个 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- CSS3新特性的概述
CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- 棋盘问题(DFS)& Dungeon Master (BFS)
1棋盘问题 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的 ...
- html中a标签伪类的优先级与顺序
/** 这四个伪类的优先级相同,前一个会覆盖后一个 建议书写顺序: lvha => love hate(好记) */ a:link { color: red; } a:visited { col ...
- 获取年月日格式为yyyy-m-d简单写法
方法:通过日期函数toLocaleString()获取.new Date().toLocaleString( ); //"2019/9/1 上午11:20:23" 获取年月日方法 ...
- shell变量及相关命令
- InnoDB不支持contains等
并非所有引擎都支持全文本搜索MySQL.与所有其他的DBMS一样,MySQL具有一个具体管理和处理数据的内部引擎.在你使用CREATE TABLE语句时,该引擎具体创建表,而在你使用SELECT语句或 ...
- Nginx Web 基础入门
目录 Nginx Web 基础入门 Nginx快速安装 两种方式部署Nginx 如何升级nginx或者添加功能 使用systemd管理nginx nginx相关配置文件 nginx的配置文件详解 虚拟 ...
- [js测试]JavaScript Web Quiz By davidshariff
Question1 var foo = function foo() { console.log(foo === foo); }; foo(); 输出是"true",因为foo就指 ...
- 力扣——3sum closest(最接近的三数之和)python 实现
题目描述: 中文: 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一 ...
- python中二维数组的建立,输入和输出
''' for循环: for i in range(x,y,dir): pass 首先这个区间是左闭右开 其次dir在省略的情况下默认为1,就是每次加一,也可以指定 python的数组: python ...
- codeblocks编译调试C语言二级指针小记
夜已深,暂时附上一个截图,后面慢慢道来. 下图时用codeblocks调试C语言的界面,codeblocks版本是17.12nosetup版,也为继承mingw,我用的编程器是tdm-gcc-5.1. ...