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 ...
随机推荐
- VS进程附加的使用
一,附加进程(ctrl+alt+p)调试本地服务器接口(WCF,webapi等)的api 1>接口(WCF,webapi等)的api发布到本地IIS服务器,然后使用附加进程,将你发布的IIS添加 ...
- Python二分查找算法
Python 二分查找算法: 什么是二分查找,二分查找的解释: 二分查找又叫折半查找,二分查找应该属于减值技术的应用,所谓减值法,就是将原问题分成若干个子问题后,利用了规模为n的原问题的解与较小规模( ...
- DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3
在对表load数据之后,表出现如下错误: DB2 SQL error: SQLCODE: -668, SQLSTATE: 57016, SQLERRMC: 3; 错误解释:表处于"装入暂挂& ...
- mysql -- mysql基于ssl的主从复制
mysql基于ssl的主从复制由于mysql在复制过程中是明文的,所以就大大降低了安全性,因此需要借助于ssl加密来增加其复制的安全性. 主服务器node1:172.16.200.1从服务器node2 ...
- 三、TortoiseSVN 单独拉取项目某个文件
一.项目拉取后,单独对某个文件拉取 实践中会出现这样的问题,在svn 中 我项目 ,已经拉取了,但是 某个文件改乱了 ,想从新对某个文件拉取 . 解决方案:1.删除某个文件,从新更新获取-右击该文件上 ...
- JS数字转字符串的方法(number to string)
一.双点解析 ..toString(); 二.括号先计算再转换 ().toString(); 三.加空串 + ''
- [css]等高列的简单实现
又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...
- Django Rest框架 APIView源码调用
上一篇说了请求访问的流程,这一篇说一下请求对应的源码调用 as_view 定义view dispatch dispatch initialize_request get_parsers ...
- [javase基础] JDK JRE JVM的区别?
JDK Java Development Kit 用作开发, 包含了JRE,编译器和其他的工具(比如: JavaDoc,Java调试器),可以让开发者开发.编译.执行Java应用程序. JRE Jav ...
- JDBC中如何进行事务处理?
Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务:当事务完成后用commit()显式提交事务:如果在事务处理过程中发生异常则通过rollb ...