CSS笔记

-@规则

1. @charset 设置样式表编码
2. @import 导入其他样式文件(模块化)
3. @meida 媒体查询(移动端开发)
4. @font-face 自定义字体

自定义字体

1. 到www.iconfont.cn阿里妈妈图标库选图标放入购物车
2. 下载代码，解压
3. 将后缀为.eot .svg .ttf .woff .woff2的文件复制到项目中
4. 打开压缩包中的html文件找到下面的@font-face代码和.iconfont代码复制到css文件中
5. 修改@font-face代码url中的路劲为自己刚才3中文件的路径
6. 根据解压包中html文件使用字体

选择器

常见选择器

• id 选择器，每个 id 只能对应一个标签， id 是一对一的关系
• class 选择器，多对多的关系
• 标签选择器
• 通配符选择器
• 属性选择器

选择器权重

• !important Infinity
• 行间样式 1000
• id 100
• class|属性|伪类 10
• 标签|伪元素 1
• 通配符 0

组合选择器

• 父子选择器（空格分隔）

  div span{}

• 直接子元素选择器（只选择下面一级的元素）

  div>span{}

• 并列选择器（不能都是标签选择器）

  div.num{}

• 分组选择器（多个标签相同操作）

  div,span,p{}

• 组合选择器的权重

  同一行权重相加（不管是并列，还是派生选择器）

• 权重相同

  相同 css 文件；写在后面的其作用

  不同 css 文件：先导入的起作用

• 子节点选择器

  .mid_panel>div:nth-of-type(5){
      /*选中 mid_panel 下第5个div子节点*/
  }
  

hover

• hover 本身有权重，只有权重大的时候才能其作用
• hover 默认修改本身元素样式，可以在后面添加子元素修改子元素样式

伪元素

• :first-line

  用于设置文本首行样式

• :first-letter

  用于设置文本首字母样式

• :before

  元素内容前插入新内容

• :after

  元素内容之后插入新内容

• :first-child

  第一子元素

/*选中伪元素*/
元素::after{
    content: "内容"	/*伪元素默认为行级元素*/
}

布局

层模型

position

• absolute

  脱离文档流进行定位，根据最近的有定位的父级进行定位，如果没有，就相对于文档定位（一般用于定位）

• relative

  保留原来位置进行定位，相对于自己原来的位置进行定位（一般用于父级参照物），不会使元素脱离文档流

• fixed

  固定定位，把元素固定到浏览器某个位置，不会随着浏览器滚动为改变

• static（默认）

  正常文档排列方式

盒模型

• 标准盒模型

  总宽度 = border(左右) + width + padding（左右）

  总高度 = border（上下） + height + padding（上下）

  • 盒子壁 border
  • 内边距 padding
  • 盒子内容 width * height
  • 外边距 margin(margin 不算到盒子大小上)

• 怪异盒模型（IE盒模型）

  总宽度 = width

  总高度 = height

  内容区就是除去 padding 和 border 的区域

​ 标准盒模型 --> 怪异盒模型： box-sizing = border-box

display

• inline 行级元素
  内容决定元素所占位置，不能通过改变 css 改变宽高

  span strong em a del

• block 块级元素

  独占一行，可以通过 css 改变宽高

  div p ul li ol form address

• inline-block

  内容决定大小，可以改变宽高

  img

  这些属性可以通过 css 的 display 改变

注意：行级元素只能嵌套行级元素（a 标签不能套 a 标签）

块级元素能嵌套任何元素，但是（p 标签不能嵌套块级元素）

浮动

让元素站队，left 是从左排， right 是从右排，空间不够时换行

• 浮动流：浮动元素产生了浮动流

  • 所有产生了浮动流的元素，块级元素看不到他们（块级元素会往上走）
  • 产生了 bfc 的元素和文本类的属性的元素以及文本都能看到浮动元素

• 清除浮动流（利用伪元素选中逻辑最后）

  父级元素::after{
      content: "";
      display: block;
      clear: both;		//清除左右两边的浮动流（必须是块级元素）
  }
  

flex 弹性布局

为盒子模型提供最大的灵活性

• 基本使用

  • 任何容器都可使用 flex 布局

    .box{
        display: flex;
    }
    

    行内元素也能使用 flex 布局

    display: inline-flex
    

    webkit 内核浏览器，必须加上 -webkit 前缀

    display: -webkit-flex;
    

    注

    设置 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效

• 基本概念

  设置了 flex 布局的元素称为 flex container(容器)，所有子元素称为 flex ite(项目)

  

• 容器属性

  • flex-direction：决定主轴方向（项目排列顺序）

    • row(默认)

      ​

    • row-reverse

      ​

    • column

      ​

    • column-reverse

      ​

  • flex - wrap：换行

    默认情况下项目都排在一条线上，如果超出容器，则减少项目宽度，该属性定义如何换行

    • nowrap：不换行

      超出容器时，缩小 item 的 main-size 或 cross-size

      ​

    • wrap：换行，第一行在上方

      ​

    • wrap-reverse：换行，第一行在下方

      ​

  • flex-flow：是 flex-direction 和 flex-wrap 的简写。默认值为 row nowrap

    flex-flow: column wrap
    

  • justify-content：定义项目在主轴上的对齐方式

    • flex-start(默认)

      ​

    • flex-end

      ​

    • center

      ​

    • space-around

      ​

    • space-between

      ​

    • space-evenly

      margin 指的是 item 的 margin

      ​

  • align-items

    • flex-start(默认)

      ​

    • flex-end

      ​

    • center

      ​

    • baseline

      项目第一行文字基准线对齐

      ​

  • align-content

    定义多根轴线对齐方式，若只有一根轴线，该属性不起作用

    • flex-start：与交叉轴起点对齐

      ​

    • flex-end：与交叉轴终点对齐

      ​

    • center

      ​

    • stretch(默认值)：占满整个容器

      ​

    • space-between

      距离关系请参照 justify-content

      ​

    • space-around

      ​

    • space-evenly

      ​

• 项目属性

  • order

    定义项目排序顺序，数值越小，排列越靠前，默认为 0

  • flex-grow

    定义项目放大比例，默认为 0 ，即如果存在剩余空间也不放大，如果所有项目 flex-grow 的属性都为 1，则它们等分剩余空间，如果一个项目为2，其他为1，则占据空间大1倍

    注：如果没有剩余空间，怎么设置都没用

  • flex-shrink

    定义了项目的缩小比例，空间不足时将项目缩小。默认为 1，各项目等比例缩小，0不缩小

  • flex-basis

    分配多余空间之前，项目占据的主轴空间(main size)默认为 auto (即项目本来大小)，也可设置为固定值，项目占据固定大小(设置了固定值，将不受 grow 和 shrink 的影响)

  • flex

    flex-grow，flex-shrink，flex-basis 的简写

  • align-self

    允许单个项目有与 其他项目不一样的对齐方式，可覆盖 align-items 属性，默认为 auto(继承父类元素属性)

grid 网格布局

将网页划分成一个个网格，可以任意组合不同的网格

flex是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局。flex通过项目的 flex 属性只能实现单行的栅格布局无法实现多行栅格布局

grid是将容器划分为"行"和"列"，产生单元格，然后指定"项目"所在单元格，可以看作二维布局

• 容器属性

  • display: grid

    使用grid布局

  • grid-templage-columns

    grid-templage-rows

    指定行与列构建网格

    .container {
       300px;
      height: 300px;
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }
    

    上述代码将容器分为三行三列的九宫格

    ​

    也可以使用百分比

    .container {
      display: grid;
      grid-template-columns: 33.3% 33.3% 33.3%;
      grid-template-rows: 33.3% 33.3% 33.3%;
    }
    

    ​

    repeat()函数

    重复写同样的值的时候可以使用该函数，与上面的效果是一样的

    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
    

    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    

    auto-fill关键字

    单元格大小固定，容器大小不确定的时候，如果希望每一行每一列容纳尽可能多的单元格

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
    }
    

    fr关键字

    比例关系

    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;	/*比例为1:1*/
    }
    

    fr与绝对单位结合使用

    .container {
      display: grid;
      grid-template-columns: 150px 1fr 2fr;
    }
    

    minmax()函数

    范围

    /*列宽不大于1fr，不小于100px，基于单元格里面的内容*/
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    

    auto关键字

    浏览器自己决定长度

    /*等于该行的剩余宽度*/
    grid-template-columns: 100px auto 100px;
    

    网格布局中加入网格线名称

    用[]指定每一根网格线的名字，方便后面的使用

    .container {
      display: grid;
      grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
      grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
    }
    

  • grid-row-gap

    grid-column-gap

    grid-gap

    设置行列间距

    .container {
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        /*等价于 grid-gap: 20px 20px*/
    }
    

    ​

    grid-gap是上面两个属性的合并简写属性

    grid-gap:<row-gap> <column-gap>

    如果只写一个值那么后面那个值等于前面一个值

  • grid-template-areas

    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas: 'a b c'
                           'd e f'
                           'g h i';
    }
    

    划分出来的九个区域分别命名为 a 到 i

    grid-template-areas: 'a a a'
                         'b b b'
                         'c c c';	/*九个单元格划分为 a,b,c 3个区域*/
    

    注意：区域的命名会影响网格线的命名，每个区域的起始网格线会自动命名为 区域名-start ，终止网格线自动命名为 区域名-end

  • grid-auto-flow 属性

    放置顺序

    • column(默认) 先行后列

    • row 先列后行

    • row dense 某些项目指定位置后剩余元素怎么放置

    • column dense

  • justify-items

    align-items

    place-items:<justify-items> <align-items>

    单元格内容的水平垂直位置

    • start

    • end

    • center

    • streth(默认) 拉伸，占满整个单元格

  • justify-content

    align-content

    place-content:<justify-content> <align-content>

    整个内容区域在容器里面的水平位置

    • start
    • end
    • center
    • streth
    • space-around
    • space-between
    • space-evenly

  • grid-auto-columns

    grid-auto-rows

    浏览器自动创建的多余网格的列宽和行高，当元素被定义在网格外时

    #container{
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-auto-rows: 50px; 
    }
    
    .item {
      font-size: 2em;
      text-align: center;
      border: 1px solid #e5e4e9;
    }
    
    .item-1 {
      background-color: #ef342a;
    }
    
    .item-2 {
      background-color: #f68f26;
    }
    
    .item-3 {
      background-color: #4ba946;
    }
    
    .item-4 {
      background-color: #0376c2;
    }
    
    .item-5 {
      background-color: #c077af;
    }
    
    .item-6 {
      background-color: #f8d29d;
    }
    
    .item-7 {
      background-color: #b5a87f;
    }
    
    .item-8 {
      background-color: #d0e4a9;
      grid-row-start: 4;
      grid-column-start: 2;
    }
    
    .item-9 {
      background-color: #4dc7ec;
      grid-row-start: 5;
      grid-column-start: 3;
    }
    

    ​

• 项目属性

  • grid-column-start

    grid-column-end

    grid-row-start

    grid-row-end

    通过单元格四周的网格线定义单元格的位置和大小

    .item-1 {
      grid-column-start: 2;
      grid-column-end: 4;
    }
    

    上面的代码指定一号项目的左边框是第二跟垂直的网格线，右边框是第四根垂直网格线

    除了用下标指定还可以用网格线名称指定

    .item-1 {
      grid-column-start: header-start;
      grid-column-end: header-end;
    }
    

    span关键字

    表示跨越的网格数

    /*两个样式效果一样*/
    .item-1 {
      grid-column-start: span 2;
    }
    .item-1 {
      grid-column-end: span 2;
    }
    

    水平跨越两个网格

  • grid-column: <start-line> <end-line>

    grid-row: <start-line> <end-line>

  • grid-area

    指定项目放在哪个区域

    .item-1 {
      grid-area: e;
    }
    

    将 1 号项目放在 e 区域

  • justify-self

    align-self

    place-self：<justify-self> <align-self>

    设置单元格内容的水平垂直位置，与justify-items用法完全一致但只作用于单个项目

    • start
    • end
    • center
    • stretch

margin 的两个 bug

• margin 塌陷

  子元素相对于父元素的 margin-top 不起作用，子元素和父元素的 margin-top 会导致整体移动，取 margin-top的最大值。

  解决：1、给父级加上 border-top

  ​ 2、bfc: block format context

  • 如何触发一个盒子的 bfc

    • position: absolute
    • display: inline-block
    • float: left/right
    • overflow: hidden

    （使用哪个，具体分析）

• margin 合并

  正常来说两个元素的 margin 是分开计算的，即两个元素的距离 = margin1 + margin2

  但两个块级元素的 margin 是合并的，距离 = max(margin1, margin2)

  解决：(1) 将一个元素或两个元素都放进 bfc 的父级中（不推荐）

  ​ (2) 不解决，通过数学计算好距离（推荐）

文本类元素的特点

文本类元素包括 inline 和 inline-block

• 当两个文本之间有空格，换行符时，文本元素之间会有分隔符

  每个 img 换行的话图片之间会存在一个分隔符，这是带有 inline 属性的标签都有的文字特征

  • 所有 img 之间都不用空格和换行
  • 将 img 标签改为 block

• 当文本元素里有文字后，后面的文字与该文字底对齐，没有文字就与容器底对齐

• vertical-align: middle/top/bottom/px; 文本元素对齐线

顶部固定导航脱离文档流问题

设置了 fixed 会脱离文档流，下面的元素会往上走，可以设置 border 将元素挤下来（如果设置的是 padding 滑动条不会被挤下来）

滑动条出现在容器内部

设置属性 overflow: auto

CSS中常见的单位

• px ——像素、绝对单位
• pt ——磅，绝对单位
• em ——相对单位，相对于父元素字体大小
• rem ——相对根节点 html 字体大小计算，兼容性：chrome/firefox/IE9+
• vw ——视窗宽度，范围 0-100
• vh ——视窗高度
• vmin ——min(vw,vh)
• vmax ——max(vw,vh)
• in ——英寸，绝对单位
• ch ——数字0的宽度

position实现水平垂直居中

父级必须有定位属性

.box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%)
}

css初始化

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

vertical-align

图片或表单与文字垂直居中对齐（行内元素或行内块元素）

• 默认基线对齐
• middle：中线对齐
• bottom：底线对齐
• top：顶线对齐

相邻边框

​

可以看到两个相邻的边框会让边框变粗，这种变粗大多时候是不需要的

解决：margin负值的妙用

​

只需要给 margin-left 添加一个与边框大小相同的值即可，这样后面的盒子就会把前面的边框挡住

​

但如果我们给盒子设置hover样式的话，由于右边的边框被挡住了，所以就没有hover样式

解决：

1. 如果每个盒子都没有相对定位，则给hover盒子设置相对定位
2. 如果每个盒子都有相对定位，则给hover盒子设置更高的z-index层级

文字环绕效果

​

给左边的盒子设置 float:left 即可

text-align 实现布局

text-align能对盒子内的所有行内元素和行内块元素 实现居中、左、右布局

样式

伪元素使用自定义字体

content里面放入十六进制编码

&#xe61a --> e61a

.box::after{
    content: 'e61a';
    font-family: 'iconfont'!import;
}

write-space

• nowrap：不换行

background

• background-image 设置背景图片

  • url("图片路径")

• background-repeat 图片不能铺满容器时是否重复出现

  • repeat(默认重复)
  • no-repeat

• background-size 设置图片大小

  • px px 直接设置宽高，也可以只设置宽，高按比例缩放
  • % % 百分比设置宽高
  • cover 图片按比例铺满整个容器（可能图片会丢失一部分）
  • contain 图片按比例铺满整个容器（图片完整出现，多的地方留白）

• background-position 图片在容器中的位置

  • x y
  • % %
  • left top
  • left bottom
  • ...
  • center center

• 渐变

  线性渐变

  • background-image: linear-gradient(方向，开始的颜色，结束的颜色)
    • 方向： to bottom（默认）；to right； to left ； to top

超出容器．．．

• 单行文本超出容器 ...

  white-space: nowrap; /*不换行*/
  overflow: hidden;	/*溢出部分隐藏*/
  text-overflow: ellipsis; /*溢出部分...代替*/
  

• 多行文本超出容器 ...

  手动 ...

头部图标

• 制作 ico 图片

  通过线上转为 ico 图片

• 将 ico 图片放进项目中

• 通过<link rel="icon" href="icon图片路径">

图片代替文字

作用：当网络环境很差的时候，浏览器会屏蔽掉网页的 css 和 js 只加载 html ，通过图片代替文字，这不会影响网站的主要功能的实现

• 缩进 + 单行 + 超出隐藏

  text-indent: 99999px;
  white-space: nowrap;
  overflow: hidden;
  

• padding 撑开图片

  height: 0;
  padding-top: 100px;
  overflow: hidden;
  

颜色

• 颜色的三种表示

  • 直接写英文单词 red blue green

  • 十六进制

    #ff5000 #fff (aabbcc -> 缩写abc)

  • 二进制

    rgb(255,0,0)

• 透明度

  • rgba()

    a: 0~1（0：完全透明 1：完全不透明）

  • opacity: 0~1

样式的继承

样式继承是指父类设置了样式，子类也会有样式（仅对于文字样式）

样式继承的优先级低于所有选择器的优先级，只有当元素没有设置样式的时候，样式继承才能起作用

圆角 border-radius

• 每个盒子有四个角

  border-radius: 上左 上右 下右 下左

  border-top-left-radius 设置左上圆角

• 圆角的值

  px 该 px 为边的一半时也是一个圆

  % 50% 表示一个圆

三角盒子

边角均分原理

• 等腰三角形

  .triangle{
       0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 0 solid transparent;
  }
  

  

• 直角三角形

  .triangle{
               0;
              height: 0;
              border-top: 100px solid transparent;
              border-right: 50px solid #eee;
              border-bottom: 0 solid transparent;
              border-left: 0 solid transparent;
          }
  

  

遮罩层

我们写html页面是经常会有这种需求：点击一个按钮弹出一个框，这个框存在时不能点击其他地方，只有关闭这个框才能点击其他地方。这个时候就需要用到遮罩层

遮罩层就是利用一个长宽为浏览器长框的 div ，将这个div置于弹出框之下，其他元素之上，这个遮罩层与弹出框同步出现，这样弹出框出现的时候，遮罩层的存在使我们无法点击其他地方

• 例子

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <style>
          /*遮罩层*/
          .bgdiv{
              background-color:#e3e3e3;
              position:absolute;
              z-index:99;
              left:0;
              top:0;
              100vw;
              height:100vh;
              opacity:0.5;
              filter: alpha(opacity=50);
              -moz-opacity: 0.5;
  
          }
          /*弹出框*/
          .contain{
               200px;
              height: 200px;
              z-index: 100;
              background: red;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -100px;
              margin-top: -100px;
          }
      </style>
  </head>
  <body>
      <div id="app">
          <button @click="state = !state">弹出</button>
          <div class="contain" v-show="state">弹出框</div>
          <div class="bgdiv" v-show="state"></div>
      </div>
  
      <script src="js/vue.js"></script>
      <script>
          let vue = new Vue({
              el: '#app',
              data: {
                  state: false
              },
              methods: {
  
              }
          })
      </script>
  </body>
  </html>
  
  

修改 placeholder 样式

input::-webkit-input-placeholder{
    color: #eee;
    ...
}

css初始化

京东的初始化

* {
    margin: 0;
    padding: 0
}

/*设置不斜体*/
em, i {
    font-style: normal
}

/*删除列表的点*/
li {
    list-style: none
}

img {
    /*照顾低版本浏览器，如果图片外面包含了链接会有边框的问题*/
    border: 0;
    vertical-align: middle
}

/*按钮鼠标变成小手*/
button {
    cursor: pointer
}

/*删除a标签默认颜色和下划线*/
a {
    color: #666;
    text-decoration: none
}

/*a标签hover样式*/
a:hover {
    color: #c81623
}

/*字体*/
button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}

body {
    /*抗锯齿*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

图片模糊filter滤镜

/*blur是一个函数，小括号里面数值越大，图片越模糊，注意数值要加 px 单位*/
filter: blur(5px)

calc属性计算函数

 calc(100%-20px)

精灵图

将网页中的一些小背景图整合在一张大图中，这样修只需要向服务器请求一次（缓解服务器压力）

通过 background-position 实现

往上往左移动为负值

角框

​

​ 伪元素设置边框实现

动画

animation

与过渡相比：更多变化、更多控制、连续自动播放

元素可以添加多个动画（用逗号隔开）

.panrun{
    animation: runpan 5s linear infinite;	/*动画规则 动画时间 线性动画 无限循环*/
}

/*定义动画规则*/
@keyframes runpan{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

animation 是一个简写属性，用于设置六个动画属性

• animation-name（必须）

  规定需要绑定到选择器的 keyframe 名称

  • @keyframe动画序列
    1. 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
    2. 在@keyframe中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
    3. 动画使元素从一种样式组件变化为另一种样式的效果。可以改变任意多的样式任意多次数
    4. 关键词'from'和'to'等同于0%和100%

• animation-duration（必须）

  规定完成动画所花费的时间，以 s 或 ms 计，默认0

• animation-timing-function

  规定动画的速度曲线，默认'ease'

  step速度曲线

  step(10)分步完成动画

• animation-delay

  规定在动画开始之前的延迟，默认0

• animation-iteration-count

  规定动画应该播放的次数，默认为1，infinite代表无限循环

• animation-diretion

  规定动画下一周期逆向播放，默认'normal'，'alternate' 逆播放

• animation-play-state

  规定动画是否正在运行或暂停。默认是'running'，还有'pause'

• animation-fill-mode

  规定动画结束后状态，保持'forward'；回到起始位置'backwards'

简写形式

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

不包含 animation-fill-mode

animation: move 2s linear 0s 1 alternate forwards

除了动画名称和持续时间必须写，其他都可以省略

Animate.js

transition

谁做过渡，给谁加这个属性

• 使用规范

  transition: 要过渡的属性 花费时间 运动曲线 合适开始

  • 过渡属性

    宽度高度，背景颜色，内外边距都可以（多个属性逗号分隔）。如果想要所有的属性都变化过渡，写一个 all

  • 花费时间

    单位是秒（必须写单位）

  • 运动曲线（可以省略）

    默认ease

    ​

  • 何时开始（可以省略）

    默认0s

• EX

  .box{
      transition: width 1s, height 1s
  }
  

transform

2d转换，可以实现元素的位移，旋转，缩放

• translate：移动

  正值向右向下

  负值向左向上

  translate(x,y)
  translateX(n)
  translateY(n)
  

  注：

  1. 不会影响其他元素的位置
  2. 可以使用绝对单位px，和百分比（相对于自身元素）
  3. 对行内标签没有效果

• rotate：旋转

  transform: rotate(ndeg)

  设置中心点

  .box{
      transform-origin: left bottom;	/*方位名词*/
      transform-origin: 50% 50%;		/*百分比*/
      transform-origin: 50px 50px;    /*像素*/
  }
  

  注：

  1. 单位是deg，代表度数
  2. 正值表示顺时针，负值代表逆时针
  3. 默认旋转中心点时元素的中心点

• scale：缩放

  transform: scale(x,y)

  transform: scale(n) 等比例缩放

  注意：

  1. x,y是数字，不加单位，是倍数的意思
  2. 不会影响其他盒子
  3. 可以设置缩放中心点

• 2D转换综合写法

  transform: translate() rotate() scale()
  

  注：顺序会影响最终效果

3D转换

X轴：水平向右(右正左负)

Y轴：垂直向下(下正上负)

Z轴：垂直于屏幕(外正里负)

• 3D位移

  translateX

  translateY

  translateX

  translate3d(x,y,z)

• 3D旋转

  rotateX

  rotateY

  rotateZ

  rotate3d(x,y,z) 矢量

perspective：给父级添加这个属性才能产生3D效果(近大远小)，模拟人类眼睛，该属性的值就是这只眼睛到屏幕的值，值越大平面成像越大，值越小平面成像越小

transform-style：控制子元素是否开启三维空间。transform-style: preserve-3d

案例

• 图片放大效果
• 边框重叠效果
• 进度条效果
• 图片模糊效果
• 三角形效果
• 热点图效果
• 打字机效果
• 奔跑效果
• 翻转盒子
• 3D导航栏
• 旋转木马照片墙