2D和3D的转换

发表于 更新于 分类于

3D变形

  1. 3D旋转
    • 将transform的属性设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转
  2. 空间移动
    • 当元素进行3D旋转后，即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动
  3. perspective（景深）
    • 该属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px
      1
      2
      3
      4
      <div class="box1">
           <p></p>
       </div>
       <!-- div 是舞台，必须设置perperctive属性，p是演员，设置transform属性 -->
  4. transform-style（指定嵌套元素是怎样在三维空间中呈现。）
    • preserve-3d 表示所有子元素在3D空间中呈现。
    • flat 表示所有子元素在2D平面呈现。
      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
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
         <!DOCTYPE html>
         <html lang="en">
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
             section {
                  width: 200px;
                  height: 200px;
                  margin: 100px auto;
                  perspective: 10000px;
              }
              .box {
                  width: 200px;
                  height: 200px;
                  perspective: 10000px;
                  position: relative;
                  /* 设置变形类型，保留它内部的3D效果 */
                  /* 这个盒子又是舞台，又是演员，这个box整体带着里面的p旋转 */
                  transform-style: preserve-3d;
                  transition:all 10s ease 0s;
              }

              section:hover .box {
                  transform: rotateX(360deg) rotateY(360deg);
              }

              .box p {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 200px;
                  height: 200px;
              }

              .box p:nth-child(1) {
                  background-color: rgba(219, 56, 211, 0.486);
                  /* 前面 */
                  transform: translateZ(100px);
              }

              .box p:nth-child(2) {
                  background-color: rgba(42, 128, 199, 0.486);
                  /* 顶面 */
                  transform: rotateX(90deg) translateZ(100px);
              }

              .box p:nth-child(3) {
                  background-color: rgba(56, 219, 83, 0.486);
                  /* 背面 */
                  transform: rotateX(180deg) translateZ(100px);
              }

              .box p:nth-child(4) {
                  background-color: rgba(213, 216, 32, 0.486);
                  /* 底面 */
                  transform: rotateX(-90deg) translateZ(100px);
              }

              .box p:nth-child(5) {
                  background-color: rgba(236, 82, 102, 0.486);
                  /* 侧面 */
                  transform: rotateY(90deg) translateZ(100px);
              }

              .box p:nth-child(6) {
                  background-color: rgba(119, 17, 236, 0.486);
                  /* 侧面 */
                  transform: rotateY(-90deg) translateZ(100px);
              }
          </style>
      </head>

      <body>
          <section>
              <div class="box">
                  <p></p>
                  <p></p>
                  <p></p>
                  <p></p>
                  <p></p>
                  <p></p>
              </div>
          </section>
      </body>
      </html>

2D变形

  1. 旋转变形
    • transform: rotate(45deg);
    • 若角度为正，就是顺时针，否则就是逆时针
    • transform-origin 属性设置自己的自定义变换原点
      • transform-origin: 50px 40px;
  2. 缩放变形
    • transform: scale(3);
    • 以中心点为原点缩放
  3. 斜切变形
    • transform: skew(10deg,20deg); 即可实现斜切变形
    • x的斜切角度，y的斜切角度
  4. 位移变形IE9
    • 将 transform 属性设置为 translate ，即可实现位移变形
      • transform: translate(200px,400px);
    • 和相对定位非常像，位移变形也会“老家留坑”，形影分离。