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转换模块的更多相关文章

  1. CSS学习笔记-01-2D转换模块

    首先,mark 一下  css3 新增 的 2D 转换之 W3school 的链接: http://www.w3school.com.cn/css3/css3_2dtransform.asp 转换是使 ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  4. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  5. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  6. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  7. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  8. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  9. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

随机推荐

  1. 分布式事务之解决方案(XA和2PC)

    3. 分布式事务解决方案之2PC(两阶段提交) 针对不同的分布式场景业界常见的解决方案有2PC.TCC.可靠消息最终一致性.最大努力通知这几种. 3.1. 什么是2PC 2PC即两阶段提交协议,是将整 ...

  2. JS---案例:美女时钟

    案例:美女时钟 思路: 打开页面就有图片按每秒1张的顺序轮换,用到了日期对象,获取小时和秒. 封装到一个命名函数后,为了使页面打卡就有图片的轮换,先调用下f1,再设置setInterval <! ...

  3. PMBOK 指南 第四章 项目整合管理(4.1-4.3)

    项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...

  4. GitHub 设置和取消代理,加速 git clone

    git 设置代理: git config --global git 取消代理: git config --global --unset http.proxy 针对 github.com 设置代理: g ...

  5. inux 磁盘监控分析

    一.查看磁盘空间  1. df -h Size 分割区总容量 Used 已使用的大小 Avail 剩下的大小 Use% 使用的百分比 Mounted on 路径地址 2.查看目录的空间 du -sh  ...

  6. 使用 Redis 进行阅读数统计并定时持久化

    之前,统计每篇博文的阅读数的方式是经过筛选去重之后直接更新数据库,并发压力直接传导到数据库,假设1秒有1000个并发请求,传统方案会在1秒内并发进行1000次数据库更新操作. 为了降低数据库的并发压力 ...

  7. C# -- 优先获取电脑C盘之外的磁盘来保存数据

    C# -- 优先获取电脑C盘之外的磁盘来保存数据 1. 优先获取电脑C盘之外的磁盘来保存数据.没有其他盘则使用C盘. public string GetSaveDataDiskPath() { str ...

  8. EFCore某张表中获取某几个字段

    目录 EFCore某张表中获取某几个字段 1.背景 2.法一:linq 2.1 使用Select方法 2.2 使用ForEach方法 2.3 其他参考代码 3.法二:IQueryble 3.1 参考例 ...

  9. 利用 uDig 生成 GeoServer 可用的 SLD 渲染文件

    利用 uDig 生成 GeoServer 可用的 SLD 渲染文件 uDig简介 uDig是一个 open source (EPL and BSD) 桌面应用程序框架,构建在Eclipse RCP和G ...

  10. English: Class GXX

    ######################################## GGGGG GG GG GG GG GGGG GG GGG GGGGGG author:enomothem date: ...