CSS学习笔记2-2d变换和过渡属性
前言：今天又是一个周末，心情不错，趁着闲暇之余，把剩下来的CSS3学习的内容全部整理出来，练习用的源码也稍微整理了一下。
2D转换
transform:translate||rotate||scale||skew
平移、旋转、缩放、斜切
1. 平移 transform:translate()
参数说明：
- 只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高
- 两个值分别控制水平和垂直
- 移动不会影响其他的元素，类似于相对定位
- 我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半
- 如果想要单个的方向移动 可以写成 translateX（）和translateY（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
.box:hover{
/* transform: translate(-10px,10px); */
/* transform: translateY(-10px); */
transform: translateY(10%);
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
2. 旋转 transform:rotate()
参数说明：
- 单位是deg 角度
- 整体发生旋转（包括里面的内容）
- 正值是顺时针方向旋转 负值反之
- 中心点可以控制 transform-origin：值（值可以是方位名词，可以是像素，也可以是百分比,参照的是自身的宽高）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 10s;
transform-origin: 50% 50%;
}
.box:hover{
transform: rotate(-50deg);
}
</style>
</head>
<body>
<div class="box">1</div>
</body>
</html>
3.缩放 transform:scale()
参数说明：
- 没有单位，接受数值和小数
- 只有一个值的情况，整体缩放（等比例）
- 两个值的情况，宽度和高度分别缩放（可能会变形）
- 边框也是会缩放的，并且如果想要一个方向缩放，另外一个方向需要写一个1
- 缩放的中心点也可以被控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
border: 5px solid #000;
transform-origin: right;
}
.box:hover{
transform: scale(2,1);
}
</style>
</head>
<body>
<div class="box">1</div>
</body>
</html>
4.斜切 transform:skew()
参数说明：
- 单位是deg
- 只有一个值的情况下，水平斜切
- 两个值的情况下，水平垂直分别斜切
- 斜切的中心点也可以被控制 如果是X轴斜切 中心点控制上下 如果是Y轴斜切 中心点控制左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
border: 5px solid #000;
transform-origin: bottom;
}
.box:hover{
transform: skew(45deg);
}
</style>
</head>
<body>
<div class="box">1</div>
</body>
</html>
5.过渡 transition
transition：属性 持续时间 过渡曲线 延时
过渡不是动画，是由css的一种状态到另外一种状态中间变换的过程。
值说明：
- 那个属性需要过渡就写什么属性 可以用all来代替全部 （必写）
- 过渡持续的时间，单位可以s或者是ms （必写）
- 过渡的曲线
- 过渡从延时多长时间开始
6.2D转换总结
- 移动，斜切，放大都是可以通过X或者Y去控制某一个方向
- 中心点可以控制旋转，缩放，斜切
- 如果我们想要多个2D效果共存，需要采用连写的方式
- 当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖
- Transform的转换效果顺序尽量保持统一，如果不统一会出现一些问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
transition: all 1s;
border: 5px solid #000;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%) rotate(0deg) scale(1);
}
.box:hover{
transform:translate(-50%,-50%) rotate(360deg) scale(2);
}
</style>
</head>
<body>
<div class="box">1</div>
</body>
</html>
CSS学习笔记2-2d变换和过渡属性的更多相关文章
- CSS学习笔记-02. 2D转换模块-形变中心点
简单粗暴,直接上重点: transform-origin 接下来是代码. 首先 勾勒出 3个重叠的div 接着 给3个div分别添加 transform: rotate . <!DOCTYPE ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- 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 ...
随机推荐
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- 最大流-最小割 MAXFLOW-MINCUT ISAP
简单的叙述就不必了. 对于一个图,我们要找最大流,对于基于增广路径的算法,首先必须要建立反向边. 反向边的正确性: 我努力查找了许多资料,都没有找到理论上关于反向边正确性的证明. 但事实上,我们不难理 ...
- [Noip2016]蚯蚓 D2 T2 队列
[Noip2016]蚯蚓 D2 T2 Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯 ...
- [转] 前后端分离开发模式的 mock 平台预研
引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...
- 0421 & SX2016
山西省选...这个省...不算强吧...然而就是这么腊鸡题目还是wa得一无是处...怎么办啊怎么办啊...无处拯救青春和未来啊... T1: POI2004原题 BZOJ1524 n<=16.这 ...
- Code HighLight
#!/bin/sh BEG=`date --date '-7 days' +%Y%m%d` END=`date --date '-1 days' +%Y%m%d` #BEG='20140509' #E ...
- 简述TCP连接的建立与释放（三次握手、四次挥手）
在介绍TCP连接的建立与释放之前,先回顾一下相关知识. TCP是面向连接的运输层协议,它提供可靠交付的.全双工的.面向字节流的点对点服务.HTTP协议便是基于TCP协议实现的.(虽然作为应用层协议,H ...
- 使用poco 的NetSSL_OpenSSL 搭建https 服务端,使用C++客户端,java 客户端访问,python访问(python还没找到带证书访问的代码.)
V20161028 由于项目原因,需要用到https去做一些事情. 这儿做了一些相应的研究. 这个https 用起来也是折腾人,还是研究了一周多+之前的一些积累. 目录 1,java client 通 ...
- STM32之DMA+ADC
借用小甲鱼的经典:各位互联网的广大网友们.大家早上中午晚上好..(打下小广告,因为小甲鱼的视频真的很不错).每次看小甲鱼的视频自学都是比较轻松愉快的..我在想,如果小甲鱼出STM32的视频,我会一集不 ...
- MySQL 表分区 报错：Table has no partition for value XXX
对已存在的未分区的表进行分区 alter table test PARTITION BY RANGE(id) (PARTITION p1 VALUES LESS THAN (101),PARTITIO ...