06-transform-3d

B 站视频教程

transform 3D 变换

修改 index.html body 标签中的内容为

  

    
front
  


  

    
back
  


  

    
left
  


  

    
right
  


  

    
top
  


  

    
bottom
  



  

    
front
    
back
    
left
    
right
    
top
    
bottom
  

创建 src/style/04-transform-3d.scss

.container,
.box,
.box div {
  width: 200px;
  height: 200px;
}

.container {
  border: 1px solid red;
  padding: 10px;
  perspective: 500px;
  margin: 50px;
  float: left;
}

.box {
  position: relative;
  transform-style: preserve-3d;

  div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    background-image: radial-gradient(#aec, #fc9);
    transition: transform 500ms;
  }

  &:hover {
    .front {
      // 朝着 z 轴向外位移动 100px
      transform: translateZ(100px);
    }

    // 朝着 z 轴向内位移动 100px
    .back {
      transform: translateZ(-100px);
    }

    // 朝着 x 轴向左移动 100px 并 朝着 y 轴逆时针旋转 90度
    .left {
      transform: translateX(-100px) rotateY(-90deg);
    }

    // 朝着 x 轴向右移动 100px 并 朝着 y 轴顺时针旋转 90度
    .right {
      transform: translateX(100px) rotateY(90deg);
    }

    // 朝着 y 轴向上移动 100px 并 朝着 x 轴顺时针旋转 90度
    .top {
      transform: translateY(-100px) rotateX(-90deg);
    }

    // 朝着 y 轴向下移动 100px 并 朝着 x 轴逆时针旋转 90度
    .bottom {
      transform: translateY(100px) rotateX(90deg);
    }
  }
}

@keyframes rotate-loop {
  0% {
    transform: translateZ(-200px) rotateY(0deg) rotateZ(0deg);
  }

  25% {
    transform: translateZ(-200px) rotateY(90deg) rotateZ(90deg);
  }
  50% {
    transform: translateZ(-200px) rotateY(180deg) rotateZ(180deg);
  }
  75% {
    transform: translateZ(-200px) rotateY(270deg) rotateZ(270deg);
  }
  100% {
    transform: translateZ(-200px) rotateY(360deg) rotateZ(360deg);
  }
}

// 立体正方形效果
.cube {
  transform: translateZ(-200px);
  animation: rotate-loop 10s linear infinite;
  .front {
    transform: translateZ(100px);
  }

  .back {
    transform: translateZ(-100px);
  }

  .left {
    transform: translateX(-100px) rotateY(-90deg);
  }

  .right {
    transform: translateX(100px) rotateY(90deg);
  }

  .top {
    transform: translateY(-100px) rotateX(-90deg);
  }
  .bottom {
    transform: translateY(100px) rotateX(90deg);
  }
}

在 src/index.js 中引入新创建的样式文件

// import './style/03-transform2D.scss'
import "./style/04-transform-3d.scss";

最后，我们把 index.html 复制保存到 src/html/04-transform-3d.html