CSS学习笔记-01-2D转换模块
首先,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转换模块的更多相关文章
- CSS学习笔记-02. 2D转换模块-形变中心点
简单粗暴,直接上重点: transform-origin 接下来是代码. 首先 勾勒出 3个重叠的div 接着 给3个div分别添加 transform: rotate . <!DOCTYPE ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- 总结了一下css的部分基础知识点。---css学习笔记01
一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></d ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- 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>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
随机推荐
- 20165327 2017-2018-2 《Java程序设计》第4周学习总结
20165327 2017-2018-2 <Java程序设计>第4周学习总结 教材内容总结 第五章 继承是一种由已有的类创建新类的机制. class 子类名 extends 父类名{ - ...
- mat 使用 分析 oom 使用 Eclipse Memory Analyzer 进行堆转储文件分析
概述 对于大型 JAVA 应用程序来说,再精细的测试也难以堵住所有的漏洞,即便我们在测试阶段进行了大量卓有成效的工作,很多问题还是会在生产环境下暴露出来,并且很难在测试环境中进行重现.JVM 能够记录 ...
- android -------- ConstraintLayout Group和goneMargin(五)
前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) ConstraintLayout 宽高比和偏移量比(三) ConstraintLayout ...
- lanmp中环境变量的更改方法
1.vim /etc/profile 改成: export PATH=$PATH:/www/wdlinux/phps/71/bin/ 然后运行: source /etc/profile
- windows上使用composer安装yii2
切换成中国镜像 composer config -g repo.packagist composer https://packagist.laravel-china.org 在电脑的dos命令中写入: ...
- python记录_day09 初识函数
一.认识函数 函数:对动作或者功能的封装 格式: 函数声明 def 函数名(): 函数体 函数调用 函数名() #定义函数 def xiao(): print("你的笑像一 ...
- csu oj 1343 Long Long
Description 现在有两个单调递增序列,第一个序列有N个整数,第二个序列有M个整数,现在你可以从第一个序列中选一个数x,然后从第二个序列中选一个数y,那么有多少种情况满足x+y<=K呢? ...
- 数据结构与算法之PHP查找算法(哈希查找)
一.哈希查找的定义 提起哈希,我第一印象就是PHP里的关联数组,它是由一组key/value的键值对组成的集合,应用了散列技术. 哈希表的定义如下: 哈希表(Hash table,也叫散列表),是根据 ...
- Consider defining a bean of type 'org.springframework.data.redis.connection.RedisConnectionFactory' in your configuration
Description: Parameter 0 of method redisTemplate in com.liaojie.cloud.auth.server.config.redis.Redis ...
- PHP指针相关函数
1.each each — 返回数组中当前的键/值对并将数组指针向前移动一步 $arr = array("one", "two", "three&qu ...