CSS3

Last updated Jul 6, 2022

# CSS3

优势：

使用CSS3技术来控制页面元素CSS属性的变化
不需要js也能写
由浏览器执行，更加流畅
减少代码量

应用场景：

网页特效
用户交互
抽奖动画
网页小游戏

# transition

transition CSS 属性是 transition-property， transition-duration， transition-timing-function 和 transition-delay 的一个简写属性。

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover， :active 或者通过 JavaScript 实现的状态变化。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

# transition-timing-function
transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。除了ease以外，其他模式还包括
1. linear：匀速
2. ease-in：加速
3. ease-out：减速
4. cubic-bezier函数：自定义速度模式
最后那个cubic-bezier，可以使用工具网站来定制。
1 2 3
img{ transition: 1s height cubic-bezier(.83,.97,.05,1.44); }

transition的优点在于简单易用，但是它有几个很大的局限。

transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

# transform

转换transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

移动：translate

旋转：rotate

缩放：scale

# transform 2D

transform-origin:

转换中心点

transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给x y 设置像素或者方位名词（top bottom left right center）

translate：

transform: translate(x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果

rotate：

transform:rotate(度数)

rotate里面跟度数，单位是 deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

scale：

transform:scale(x,y);

注意其中的x和y用逗号分隔
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

注意：

同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，
其顺序会影转换的效果（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前

# transform 3D

translate3d:

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(100px)：仅仅是在x轴上移
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动。

perspective:

translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了

rotate3d:

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。

transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即可）xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

transfrom-style:

控制子元素是否开启三维立体环境。

transform-style: flat; 子元素不开启3d立体空间默认的
ltransform-style: preserve-3d; 子元素开启立体空间

代码写给父级，但是影响的是子盒子。这个属性很重要，后面必用。

# Animation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/*一个周期持续的时间，以及动画效果的名称
当鼠标悬停在div元素上时，会产生名为‘动画名称’的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义‘动画名称’效果。
*/
div:hover {
  animation: 1s 动画名称;
}

@keyframes 动画名称 {
   0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

# 具体属性

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

简写属性里面不包含 animation-play-state
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction:alternate;
盒子动画结束后，停在结束位置： animation-fill-mode:forwards;

animation-timing-function：规定动画的速度曲线，默认是“ease”

# 旋转木马案例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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>
    body{
      perspective: 1000px;
    }
    section{
      position: relative;
      height: 200px;
      width: 300px;
      margin: 200px auto;
      transform-style: preserve-3d;
      animation: rota 0.5s linear infinite;
    }

    section:hover{
      animation-play-state: paused;
    }

    @keyframes  rota {
      0%{
        transform:rotateY(0) ;
      }
      100%{
        transform: rotateY(360deg);
      }
    }
    section div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('http://pic0.iqiyipic.com/common/lego/20200209/ccc614312b7048f19408192c91a8ecf9.jpg') no-repeat ;
    }
    section div:nth-child(1){
      transform: translateZ(300px);
    }
    section div:nth-child(2){
      transform: rotateY(60deg) translateZ(300px);
    }
    section div:nth-child(3){
      transform: rotateY(120deg) translateZ(300px);
    }
    section div:nth-child(4){
      transform: rotateY(180deg) translateZ(300px);
    }
    section div:nth-child(5){
      transform: rotateY(240deg) translateZ(300px);
    }
    section div:nth-child(6){
      transform: rotateY(300deg) translateZ(300px);
    }
  </style>
</head>
<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>
</html>

jieye の数字花园