2D转换(transform)

移动盒子位置有三种方式：定位，盒子外边距，2D转换移动

2D转换是改变标签在二维平面上的位置和形状

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

2D 转换之translate

translate语法

  • x就是X轴上水平移动
  • y就是y轴上水平移动
1
2
3
transform: translate(x, y);
transform: translateX(n);
transfrom: translateY(n);

重点知识点

  • 2D的移动主要是指水平、垂直方向上的移动
  • translate最大的优点就是不影响其他元素的位置
  • translate中的100%单位，是相对于本身的宽度和高度来进行计算的
  • 行内标签没有效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px);
  /*百分比用法*/
  transform: translateY(100%);   
}

让一个盒子水平垂直居中

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
div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
    }
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
  }
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
     }

2D 转换之rotate

  • 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
1
2
3
4
/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

rotate语法

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

设置元素旋转的中心(transform-origin)

1
transform-origin: x y;

注意

  • 后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
  • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

2D 转换之scale

scale的作用：用来控制元素的放大与缩小

1
transform: scale(x, y)

知识要点：

  • 注意，x与y之间用逗号进行分隔
  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
  • transform: scale(2, 2): 宽和高都放大了二倍
  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
  • transform:scale(0.5, 0.5): 缩小
  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
1
2
3
4
5
6
7
8
9
10
div:hover {
 /* 注意，数字是倍数的含义，所以不需要加单位 */
 /* transform: scale(2, 2) */

 /* 实现等比缩放，同时修改宽与高 */
 /* transform: scale(2) */

 /* 小于 1 就等于缩放*/
 transform: scale(0.5, 0.5)
}

2D 转换综合写法和顺序问题

  • 同时使用多个转换，其格式为
  • transform: translate() rotate() scale()
  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  • 当我们同时有位置或者其他属性的时候，要将位移放到最前面
1
2
3
div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

动画(animation)

「动画」是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

「动画的使用」

  1. 先定义动画
  2. 再调用定义好的动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*1. 定义动画*/
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}
div {
 /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
}

「动画序列」

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  • 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

「动画常见属性」

属性 描述
@keyframes 规定动画
animation 简写属性，animation-play-state除外
animation-name 规定@keyframes动画的名称（必写）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认0（必写）
animation-timing-function 规定动画的速度曲线 ，默认 ease
animation-delay 规定动画何时开始，默认0
animation-iteration-count 规定动画被播放次数，默认1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认normal, 逆播放alternate
animation-play-state 规定动画是否正在运行或暂停，默认running paused
animation-fill-mode 规定动画结束后状态，forwards/ backwards 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

「动画简写方式」

1
2
3
4
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

animation: move 2s linear 1s infinite alternate forwards;

知识要点

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

「速度曲线细节」

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

值 描述
linear 动画从头到尾速度相同，匀速
ease 默认，动画低速开始，加快，结束前变慢
ease-in 动画低速开始
ease-out 动画低速结束
ease-in-out 动画低速开始和结束
steps() 指定了时间函数中的间隔数量（步长） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*打字机效果*/
div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

过渡(transition)

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

深入理解CSS过渡transition
https://www.cnblogs.com/xiaohuochai/p/5347930.html

「定义」

过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

1
2
3
4
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
~~~html
<div class="test"></div>

「复合属性」

  • 过渡transition的这四个子属性只有transition-duration是必需且不能为0。
  • transition-duration和transition-delay都是时间。
  • 当两个时间同时出现时，第一个是transition-duration，第二个是transition-delay
  • 当只有一个时间时，它是transition-duration，而transition-delay为默认值0s
  • transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

3D转换

「3D的特点」近大远小，物体和面遮挡不可见

「三维坐标系」

  • x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
  • y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
  • z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

1. 3D 转换知识要点

  • 3D 位移：translate3d(x, y, z)
  • 3D 旋转：rotate3d(x, y, z)
  • 透视 ：perspctive
  • 3D呈现 transfrom-style

3D移动translate3d

1
2
3
4
5
6
7
8
9
10
3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

  transform: translate3d(100px, 100px, 100px)
  /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
  transform: translate3d(100px, 100px, 0)

3D透视perspective

知识点讲解

  • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
  • 实际上模仿人类的视觉位置，可视为安排一只眼睛去看
  • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大，越远成像越小
  • 透视的单位是像素

知识要点

  • 透视需要写在被视察元素的父盒子上面
  • 注意下方图片
  • d：就是视距，视距就是指人的眼睛到屏幕的距离
  • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
1
2
3
4
body {
  /*透视需要写在被视察元素的父盒子上面 */
  perspective: 1000px;
}

translateZ与perspective的区别

  • perspecitve 给父级进行设置视距的，translateZ 给 子元素进行设置不同的大小

3D旋转rotate3d

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

语法：

  • transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
  • transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
  • transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
  • transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

左手法则：

  • 左手的手拇指指向 x 轴的正方向
  • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

3D呈现transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat 代表子元素不开启 3D 立体空间，默认的
  • transform-style: preserve-3d 子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子

案例：3d导航栏

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
72
73
74
<style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float:left;
            margin: 0 10px;
            width: 120px;
            height: 35px;
            list-style: none;
            
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .font {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom {
            background-color: purple;
            transform: translateY(17.5px) rotateX(-90deg);
        }
        .font, 
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


    </style>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="font"></div>
                <div class="bottom"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="font"></div>
                <div class="bottom"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="font"></div>
                <div class="bottom"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="font"></div>
                <div class="bottom"></div>
            </div>
        </li>
    </ul>
</body>