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

转换是使元素改变形状、尺寸和位置的一种效果。

2D 转换方法:

  • translate()    --  平移
  • rotate()        --   旋转,转动
  • scale()     --  缩放
  • skew()   --  倾斜
  • matrix()  --  综合(大杂烩)

----------------------------

代码示例:

  • rotate()        --   旋转,转动

效果:

--

  • translate()    --  平移

--------------

  • scale()     --  缩放

如果取值是1,代表不变。
           如果取值大于1,代表放大。
           如果取值小于1,代表缩小。

   如果水平和垂直缩放都一样,那么可以简写成一个参数。下面代码可以 写成:transform: scale(1.5)

效果:

----------------------

综合(大杂烩)

效果:

CSS学习笔记-01-2D转换模块的更多相关文章

  1. CSS学习笔记-02. 2D转换模块-形变中心点

    简单粗暴,直接上重点:  transform-origin 接下来是代码. 首先 勾勒出 3个重叠的div 接着 给3个div分别添加 transform: rotate . <!DOCTYPE ...

  2. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  3. 总结了一下css的部分基础知识点。---css学习笔记01

    一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...

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

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

  5. CSS学习笔记

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

  6. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

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

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

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

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

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

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

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

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

随机推荐

  1. 20165327 2017-2018-2 《Java程序设计》第7周学习总结

    20165327 2017-2018-2 <Java程序设计>第7周学习总结 教材内容总结 第十一章 (一)MySQL数据库服务器 下载安装MySQL服务器 启动MySQL数据库服务器 在 ...

  2. Elasticsearch-基础介绍及索引原理分析

    介绍 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 L ...

  3. Linux上配置bond

    http://blog.csdn.net/wuweilong/article/details/39720571 一,配置设定文件[root@woo ~]# vi /etc/sysconfig/netw ...

  4. LeetCode--415--字符串相加

    问题描述: 给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和nu ...

  5. 机器学习ML策略

    1.为什么是ML策略 例如:识别cat分类器的识别率是90%,怎么进一步提高识别率呢? 想法: (1)收集更多数据 (2)收集更多的多样性训练样本 (3)使用梯度下降训练更长时间 (4)尝试Adam代 ...

  6. Tensor RT使用记录

    Tensor RT的介绍在此不做赘述. 自己在服务器上本打算装Tensor RT来着,不过过程很艰辛,最后发现服务器的cudnn版本偏低了,还需要升级cudnn的版本.故,在自己的电脑上了装了下Ten ...

  7. ubuntn 安装python3 及 django及pip3

    1.sudo apt-get install python3-pip    安装pip3 2.sudo pip3 install django   通过pip3安装django 3. sudo apt ...

  8. springboot(十九)使用actuator监控应用

    微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...

  9. tcpcopy真实流量压测工具

    https://quentinxxz.iteye.com/blog/2249799 http://blog.chinaunix.net/uid-25057421-id-5576741.html htt ...

  10. for + setTimeout

    一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 ...