017 3d 变换景深不设置就是平行光。transform属性必须写全。

perspective

景深不设置就是平行光。transform属性必须写全。

div{
  transform:rotate3d(x,y,z,angle);
  /*沿着向量旋转
  从源点到向量的方向*/
  transform:scale3d(x,y,z)
  transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,10,10,10,1)
  perspective:depth;
  /*给到每个子元素，不给到自己，用transform：perspective时给到自己
  设置z*/
  perspecive-origin：x y;
  /*设定视角的位置*/
  
  
  transform-style:preserve-3d;
  /*显示3d 不显示投影 设定给子元素用的*/
  backface-visibility:hidden
  /*隐藏背面 qq窗口背靠背 */
}

制作圆角梯形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 100px;
      width: 200px;
      background-color: red;
      transform: perspective(500px) rotatex(72deg);
      border-radius: 25px 25px 0 0;
      border-top-right-radius: 9px 33px 0 0;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

transition

transition-property:
transition-duration
transition-timing-function 缓动函数 cubic-bezier
- steps （4，start） end
- steps（99999999）匀速
transition-delay 可以为负数
transition:property duration timing-function delay

animation

keyframes 关键帧

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    @keyframes foo {
      0% {
        width: 100px;
        height: 200px;
      }

      15% {
        width: 50px;
        height: 50px;
      }

      70% {
        background-color: red;
        animation-timing-function: steps(5);
        /*70%后变换五步*/
      }

      100% {
        width: 300px;
        height: 300px;
      }
    }

    div {
      animation-name: foo;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-delay: 5s;
      /*只有第一次有延迟 迭代之间没有延迟*/
      animation-direction: alternate;
      /*一次正向播放 一次反向*/
      animation-fill-mode: backwards;
      /*backwards 播放之前保持第一帧的样子 需要延迟
      forwards 播放之后保持最后一帧的样子 不能无限次数*/
      width: 100px;
      height: 100px;
      background-color: black;
    }

    div:hover {
      animation-play-state: paused; 
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

sizing and values

div{
  width:max-content;
  width:min-content;
  元素大到正好让所有内容不折行
  元素小道正好所有元素不overflow
  width:fit-content;
  像浮动元素和table cells,元素大到刚好能包裹住其内容，除非超出最大宽度（超出包含块宽度） 元素折行
  width:fill
      
}

颜色混合

div{
  div {
      height: 500px;
      background-image: linear-gradient(red, green), linear-gradient(to right, blue, yellow);
      background-blend-mode: screen;
    	mix-blend-mode：
      isolation：isolate
    }
}
/*可以和图片混合*/

filter

div{
  filter:blur(5px) brightness(100%) contrast(212%) grayscale(50%) sepia(10% ) saturate(0) hue-rotate(45deg) opcity(0) drop-shadow(5px 5px 3px red) 不透明位置有阴影;
}

变量

div{
  --foo;red;
  color:var(--foo);
}

功能查询

@supports (display:flex){
  支持display:flex 则这段代码生效
}