CSS学习笔记-2D转换模块
2D转换模块:
1、旋转
1.1格式:
transform:rotate(45deg);
1.2含义:
表示旋转多少度
2、平移:
2.1格式:
transform:translate(100px,-100px);
2.2含义
第一个参数:水平方向
第二个参数:垂直方向
3、缩放:
3.1格式
transform:scale(1.5,1);
3.2含义·
第一个参数:水平方向缩放
第二个参数:垂直方向
3.3注意点:
(1)如果取值是1,代表不变;
(2)如果取值大于1,代表放大;
(3)如果取值小于1,代表缩小;
(4)如果水平和垂直都一样,则可以只写一个参数;
4、注意点:
4.1 如果需要进行多个转换,那么用空格隔开,如:
transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5)
4.2 2D的转换模块会修改元素的坐标系,旋转之后再进行平移将参照新坐标系移动
2D转换模块-形变中心点
1、默认情况下,所有元素都是以自己的中心点作为参考来进行旋转的,可以通过改变中心点属性来修改他的参考点
2、格式:
transform-origin:200px 0px;
第一个参数:水平方向
第二个参数:垂直方向
3、注意点:
3.1值有三种形式:
(1)具体像素,如:
transform-origin:100px 100px;
(2)百分比,如:
transform-origin:50% 50%;
(3)特殊关键字,如:
transfrom-origin:left top;
3.2形变中心点不仅对旋转有影响,对元素的缩放、倾斜等也有影响,但在企业开发中使用较少
2D转换模块-旋转轴向
1、默认情况下,所有轴都是围绕Z轴进行旋转
2、格式:
2.1围绕Z轴:
transform:rotateZ(45deg);
2.2围绕X轴:
transform:rotateX(45deg);
2.3围绕Y轴:
transform:rotateY(45deg);
2D转换模块-透视属性:
1、透视即近大远小
2、格式:
perspective:500px;
3、取值:
取值意味着观察物体的距离,值越大越不明显,越小越明显
4、注意点:
透视属性必须添加到需要呈现透视效果的元素的上级(父)元素上!
本节专业词语及含义:
deg(degree): 度、程度
transform: 转换、变形
rotate: 旋转
translate: 平移
scale: 缩放、比例
origin: 原点
perspective: 透视的
CSS学习笔记-2D转换模块的更多相关文章
- CSS学习笔记-01-2D转换模块
首先,mark 一下 css3 新增 的 2D 转换之 W3school 的链接: http://www.w3school.com.cn/css3/css3_2dtransform.asp 转换是使 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
随机推荐
- 分布式事务之解决方案(XA和2PC)
3. 分布式事务解决方案之2PC(两阶段提交) 针对不同的分布式场景业界常见的解决方案有2PC.TCC.可靠消息最终一致性.最大努力通知这几种. 3.1. 什么是2PC 2PC即两阶段提交协议,是将整 ...
- JS---案例:美女时钟
案例:美女时钟 思路: 打开页面就有图片按每秒1张的顺序轮换,用到了日期对象,获取小时和秒. 封装到一个命名函数后,为了使页面打卡就有图片的轮换,先调用下f1,再设置setInterval <! ...
- PMBOK 指南 第四章 项目整合管理(4.1-4.3)
项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...
- GitHub 设置和取消代理,加速 git clone
git 设置代理: git config --global git 取消代理: git config --global --unset http.proxy 针对 github.com 设置代理: g ...
- inux 磁盘监控分析
一.查看磁盘空间 1. df -h Size 分割区总容量 Used 已使用的大小 Avail 剩下的大小 Use% 使用的百分比 Mounted on 路径地址 2.查看目录的空间 du -sh ...
- 使用 Redis 进行阅读数统计并定时持久化
之前,统计每篇博文的阅读数的方式是经过筛选去重之后直接更新数据库,并发压力直接传导到数据库,假设1秒有1000个并发请求,传统方案会在1秒内并发进行1000次数据库更新操作. 为了降低数据库的并发压力 ...
- C# -- 优先获取电脑C盘之外的磁盘来保存数据
C# -- 优先获取电脑C盘之外的磁盘来保存数据 1. 优先获取电脑C盘之外的磁盘来保存数据.没有其他盘则使用C盘. public string GetSaveDataDiskPath() { str ...
- EFCore某张表中获取某几个字段
目录 EFCore某张表中获取某几个字段 1.背景 2.法一:linq 2.1 使用Select方法 2.2 使用ForEach方法 2.3 其他参考代码 3.法二:IQueryble 3.1 参考例 ...
- 利用 uDig 生成 GeoServer 可用的 SLD 渲染文件
利用 uDig 生成 GeoServer 可用的 SLD 渲染文件 uDig简介 uDig是一个 open source (EPL and BSD) 桌面应用程序框架,构建在Eclipse RCP和G ...
- English: Class GXX
######################################## GGGGG GG GG GG GG GGGG GG GGG GGGGGG author:enomothem date: ...