还不知道transform 3D转换怎么用?看这个就够了

3/22/2021 CSS3

# 文章目录

# 一、认识 3D

我们生活的环境是 3D 的,照片就是 3D 物体在 2D 平面呈现的例子
有什么特点

  • 近大远小。
  • 物体后面遮挡不可见

当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。

在这里插入图片描述

# 1.1 三维坐标系

三维坐标系其实就是指立体空间,立体空间是由 3 个轴共同组成的

  • X 轴:水平向右注意:X 右边是正值,左边是负值
  • Y 轴:垂直向下注意:y 下面是正值,上面是负值
  • Z 轴:垂直屏幕注意:往外面是正值,往里面是负值

在这里插入图片描述

3D 转换我们主要学习工作中最常用的 3D 位移和 3D 旋转
主要知识点

  • 3D 位移 :translate3d(xy,z)
  • 3D 旋转: rotate3d(xy,)
  • 透视: perspective
  • 3D 呈现: transfrom- style

# 二、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 分别指要移动的轴的方向的距离

注意:

  1. translateZ 沿着 Z 轴移动
  2. translateZ 后面的单位一般跟 px
  3. translateZ(100px)向外移动 100px(向我们的眼睛来移动的)
  4. 目前看不到效果,需要配合透视使用

语法:

transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px, 100px, 100px);
1
2

# 2.1 透视 perspective

在 2D 平面产生 近大远小 视觉立体,但是只是效果二维的

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

在这里插入图片描述

透视写在被观察元素的父盒子上面的
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z 轴,物体距离屏幕的距离,轴越大(正值)我们看到的物体就越大

translform: translateZ(100px):仅仅是在 Z 轴上移动
有了透视,就能看到 translateZ 引起的变化了
在这里插入图片描述

# 三、3D 旋转

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

  • transform: rotate(45deg):沿着 x 轴正方向旋转 45 度
  • transform: otatey(45deg):沿着 y 轴正方向旋转 45deg
  • transform: rotate(45deg):沿着 Z 轴正方向旋转 45deg
  • transform: rotate3d( x, y, z, deg):沿着自定义轴旋转 deg 为角度(了解即可)

# 3.1 rotateX

在这里插入图片描述

对于元素旋转的方向的判断我们需要先学习个左手准则
左手准则

  • 左手的手拇指指向 x 轴的正方向
  • 其余手指的弯曲方向就是该元素沿着 X 轴旋转的方向
    在这里插入图片描述

# 3.2 rotateY

在这里插入图片描述

左手准则

  • 左手的手拇指指向 y 轴的正方向
  • 其余手指的弯曲方向就是该元素沿着/轴旋转的方向(正值
    在这里插入图片描述

# 3.3 rotateZ

在这里插入图片描述

# 3.4 rotate3d

transform: rotate3d(xyz,deg):沿着自定义轴旋转 deg 为角度(了解即可)
xyz 是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。

/* 等同于 rotateX(45deg) */
/* transform: rotate3d(1,0,0,45deg); */

/* 等同于 rotateY(45deg) */
/* transform: rotate3d(0,1,0,45deg); */

/* 等同于:transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */
transform: rotate3d(1, 1, 1, 45deg);
1
2
3
4
5
6
7
8

矢量旋转:
transform:rotate3d(1,1,0,45deg)

在这里插入图片描述在这里插入图片描述

# 四、3D 呈现 transform-style

先来看一下以下代码:

<style>
  body {
    perspective: 500px;
  }
  .box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 200px;
    position: relative;
    transition: all 2s;
    /* transform-style: preserve-3d; */
  }
  .box:hover {
    transform: rotateY(60deg);
  }
  .box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: teal;
  }
  .box div:last-child {
    background-color: pink;
    transform: rotateX(60deg);
  }
</style>
<body>
  <div class="box">
    <div></div>
    <div></div>
  </div>
</body>
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

旋转的效果:
在这里插入图片描述
可以发现我们的子元素的 3D 效果没有了,又变成了二维平面的了,怎么办呢?这时候就需要我们的 transform-style 登场了。

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

  • transform- style:fiat 子元素不开启 3d 立体空间 默认的
  • transform- style: preserve-3d,子元素开启立体空间

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

接下来在 .box 加上:transform-style: preserve-3d;

效果:
在这里插入图片描述

# 五、案例

# 5.1 3D 导航栏

效果:
在这里插入图片描述

<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    margin: 100px;
  }
  ul li {
    width: 120px;
    height: 35px;
    list-style: none;
    perspective: 500px;
    float: left;
    margin: 0 5px;
  }
  .box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.3s;
  }
  .box:hover {
    transform: rotateX(90deg);
  }
  .front,
  .bottom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .front {
    background-color: pink;
    transform: translateZ(17.5px);
  }
  .bottom {
    background-color: teal;
    /* transform-origin: center bottom; */
    transform: translateY(17.5px) rotateX(-90deg);
  }
</style>
<body>
  <ul>
    <li>
      <div class="box">
        <div class="front">天行健</div>
        <div class="bottom">地势坤</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">天行健</div>
        <div class="bottom">地势坤</div>
      </div>
    </li>
    ...
  </ul>
</body>
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

# 5.2 旋转木马

效果:

在这里插入图片描述

<style>
  body {
    perspective: 800px;
    background-color: #ccc;
  }
  section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 350px auto;
    transform-style: preserve-3d;
    animation: rotate 15s infinite linear;
    background: url(../media/pig.jpg) no-repeat;
  }
  section div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 添加动画 */
  }
  section div img {
    width: 300px;
    height: 200px;
  }
  section:hover {
    animation-play-state: paused;
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  section div:nth-child(1) {
    transform: translateZ(300px);
  }
  section div:nth-child(2) {
    /* transform:translateX(300px) rotateY(60deg); */
    /* 先旋转 再移动 */
    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>
<body>
  <section>
    <div><img src="../media/1.jpg" alt="" /></div>
    <div><img src="../media/2.jpg" alt="" /></div>
    <div><img src="../media/3.jpg" alt="" /></div>
    <div><img src="../media/4.jpg" alt="" /></div>
    <div><img src="../media/5.jpg" alt="" /></div>
    <div><img src="../media/6.jpg" alt="" /></div>
  </section>
</body>
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
最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar