使用css3的3D制作一个正方形

使用css3的3D制作一个正方形

首先我们来看效果

• 首先想要制作 3D的效果 最重要的是 css3 中的 transfom-style 属性, 它有2个属性

  1. flat : 正常的平铺效果,
  2. preserve-3d : 将子元素转化为三维立体元素

• 接下来通过定位让所有的子元素都 重叠在一起,并且通过transform 属性向 Y轴正方向移动正方形一半的距离

• 因为每个子元素都是立体元素, 最后只要通过rotate(2D旋转) 让每个li标签通过旋转变成正方形的每一个面就ok了

下面是代码, 有空就研究一下吧

<style>
    div {
      padding-top: 100px;
    }
    ul {
      width: 200px;
      height: 200px;
      padding-top: 100px;
      list-style: none;
      margin: 50px auto;
      padding: 0;
      position: relative;
      transform-style: preserve-3d; /*将子元素转为3D*/
      transition: all 5s linear;
      transform: rotateX(45deg) rotateY(45deg); /*让ul整体向下转45度,向右转45度*/
    }

    li {
      width: 200px;
      height: 200px;
      /* border-radius: 50%; */
      text-align: center;
      line-height: 200px;
      position: absolute; /*让所有的子元素都重叠在一起*/
      border: 1px solid #ccc;
      left: 0;
      right: 0;
    }

    li:nth-child(1) {
      transform: translateZ(100px); /*正面*/
      background: url('./image/lol1.jpg') 0 0 no-repeat;
      background-size: cover;
    }

    li:nth-child(2) {
      transform: rotateX(180deg) translateZ(100px);/*背面*/
      background: url('./image/lol2.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(3) {
      transform: rotateY(-90deg) translateZ(100px);/*右面*/
      background: url('./image/lol3.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(4) {
      transform: rotateY(90deg) translateZ(100px);/*左面*/
      background: url('./image/lol4.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(5) {
      transform: rotateX(90deg) translateZ(100px);/*下面*/
      background: url('./image/lol5.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(6) {
      transform: rotateX(-90deg) translateZ(100px); /*上面*/
      background: url('./image/lol6.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    ul:hover {/*鼠标移动到盒子上就可以让正方体旋转起来了*/
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      background-size: 200px;
    }
  </style>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>