预备知识：CSS3中的3D变换相关知识

  1. 3D移动
    • translate3d(x,y,z)或者分开设置：translateX(Xlength),translateY(Ylength),translateZ(Zlength)
  2. 3D缩放
    • scale3d(x,y,z)或者分开设置：scaleX(x),scaleY(y),scaleZ(z)
  3. 3D旋转
    • rotate3d(x,y,z,angle)：自定义需要旋转的坐标轴
    • rotateX(x):绕X轴旋转
    • rotateY(y)：绕Y轴旋转
    • rotateZ(z):绕Z轴旋转
  4. 透视/景深效果
    • perspective(length) 为一个元素设置三维透视的距离,仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。
    • perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
    • transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中),其属性值如下：
      • flat:子元素将不保留其3D位置—-平面方式
      • preserve-3d:子元素将保留其3d位置—-立体方式

相关代码：

  1. CSS代码
    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
    *{
          padding: 0;
          margin: 0;
    }
    .box{
           width: 200px;
           height: 200px;
           margin: 100px auto;
           position: relative;
           transform: rotate3d(1,1,0,30deg);
           transform-style: preserve-3d;
           perspective: 0px;
          /*设置透视的观察角度*/
           perspective-origin: 0px 0px;
    }
    .box > div{
           width: 200px;
           height: 200px;
           position: absolute;
           opacity: 0.5;
    }
    .front{
           background-color:red;
           transform: translateZ(100px);
    }
    .back{
           background-color:yellow;
           transform: translateZ(-100px) rotateY(180deg);
    }
    .left{
           background-color:blue;
          /*移动+旋转*/
          transform: translateX(-100px) rotateY(-90deg);
    }
    .right{
           background-color:purple;
           transform: translateX(100px) rotateY(90deg);
    }
    .top{
           background-color:pink;
           transform: translateY(-100px) rotateX(90deg);
    }
    .bottom{
           background-color: green;
           transform: translateY(100px) rotateX(-90deg);
    }
  2. html代码：
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="box">
           <div class="front">front</div>
           <div class="back">back</div>
           <div class="left"></div>
           <div class="right"></div>
           <div class="top"></div>
           <div class="bottom"></div>
    </div>
  3. 提示：如果想在页面中观察立方体不同的面，可以利用F12进入开发者模式，修改box中transform和perspective的属性值即可。