前言：今天又是一个周末，心情不错，趁着闲暇之余，把剩下来的CSS3学习的内容全部整理出来，练习用的源码也稍微整理了一下。

2D转换

transform:translate||rotate||scale||skew

平移、旋转、缩放、斜切

1. 平移 transform:translate()

参数说明：

  1. 只有一个值的情况下，表示水平方向运动，正值向右，负值向左，也可以接受百分比，百分比参照的是自身的宽，高
  2. 两个值分别控制水平和垂直
  3. 移动不会影响其他的元素，类似于相对定位
  4. 我们可以通过盒子的绝对定位配合transform：translate（-50%，-50%）实现一个没有宽度高度的盒子水平垂直居中 ,如果没有宽度的话，盒子最大的宽只能达到父盒子的一半
  5. 如果想要单个的方向移动 可以写成 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()

参数说明：

  1. 单位是deg 角度
  2. 整体发生旋转（包括里面的内容）
  3. 正值是顺时针方向旋转 负值反之
  4. 中心点可以控制 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. 没有单位，接受数值和小数
  2. 只有一个值的情况，整体缩放（等比例）
  3. 两个值的情况，宽度和高度分别缩放（可能会变形）
  4. 边框也是会缩放的，并且如果想要一个方向缩放，另外一个方向需要写一个1
  5. 缩放的中心点也可以被控制
<!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()

参数说明：

  1. 单位是deg
  2. 只有一个值的情况下，水平斜切
  3. 两个值的情况下，水平垂直分别斜切
  4. 斜切的中心点也可以被控制 如果是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的一种状态到另外一种状态中间变换的过程。

值说明：

  1. 那个属性需要过渡就写什么属性 可以用all来代替全部 （必写）
  2. 过渡持续的时间，单位可以s或者是ms （必写）
  3. 过渡的曲线
  4. 过渡从延时多长时间开始

6.2D转换总结

  1. 移动，斜切，放大都是可以通过X或者Y去控制某一个方向
  2. 中心点可以控制旋转，缩放，斜切
  3. 如果我们想要多个2D效果共存，需要采用连写的方式
  4. 当在不同场景出现需要transfrom的时候，需要复制前面已经存在的，防止覆盖
  5. 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变换和过渡属性的更多相关文章

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

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

  2. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  3. CSS学习笔记

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

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

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

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

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

  6. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

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

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

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

  8. HTML+CSS学习笔记（3）- 认识标签（2）

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

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

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

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

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

随机推荐

  1. Hiberbate

    (页面-1)* 条数,条数 ---分页查询的公式(2-1)*2,2 <property name="show_sql">true</property>--在 ...

  2. SpringMvc的xml配置与annotation配置的例子的区别

    1.导入jar包时,要在xml配置基础上加 spring-aop-4.2.2.RELEASE.jar (注解的时候需要) 2.编写controller的时候要annotation需要做相关配置即红色部 ...

  3. Winform中创建超链接，点击跳转网页

    代码如下: System.Diagnostics.Process ie = new System.Diagnostics.Process();ie.StartInfo.FileName = " ...

  4. Python3.5 day4作业:对员工信息文件，实现增删改查操作。

    需求: 1.可进行模糊查询,语法至少支持下面3种: 1.select name,age from staff_table where age > 22 2.select  * from staf ...

  5. 关于px、em和rem的学习笔记！

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  6. iOS8中定位服务的变化(CLLocationManager协议方法不响应，无法回掉GPS方法，不出现获取权限提示)

    最近在写一个LBS的项目的时候,因为考虑到适配iOS8,就将项目迁移到Xcode6.0.1上,出现了不能正常获取定位服务权限的问题. self.manger = [[CLLocationManager ...

  7. iOS 添加中文支持的操作

    1.选择工程菜单,这里要选中Project,而不是Targets   2.点击Info菜单, 下拉到最后,看到Localizations. 点击+号.   3.选择中文 chinese-simplif ...

  8. android 之httpclient方式提交数据

    HttpClient: 今天实战下httpclient请求网络json数据,解析json数据返回信息,显示在textview, 起因:学校查询饭卡余额,每次都要访问校园网(内网),才可以查询,然后才是 ...

  9. bzoj3048+3049+3050

    这套月赛题不是特别难 T1:离散化+单调队列,队列里出现数的种类不超过K+1,找最大的num[a[i]] T2:一眼可以看出BFS+状压DP,还要SPFA预处理出各个块之间的dis T3:线段树,没什 ...

  10. android——数据库版本升/降级问题

    数据库版本升级 在开发android应用程序的时候,一般由于在我们开发的时候我们不知道以后会后什么新功能,也有可能增加业务逻辑(也就是更新),可想而知我们原来的数据库结构可能不适用已更新的应用,那么应 ...