transform—3D立方体

时间 2019-11-24

标签 transform 3d 立方体繁體版

原文原文链接

一、思路分析

第一步：首先须要一个大盒子，承载立方体的六个面；html

第二步：立方体的六个面须要3D转化在特定的位置，拼接成一个立方体；动画

第三步：设置动画；spa

二、代码实现

第一步：建立div而且设置样式：3d

    <style>
      .box {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 200px auto;
        position: relative;
      }
      .box > div {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
      }
      </style>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>

第二步：建立六个面，而且在父元素.box 设置立体效果code

transform-style: preserve-3d;orm

transform: rotateX(45deg) rotateY(45deg);

      .box .front {
        background-color: lawngreen;
        transform: translateZ(75px);
      }
      .box .back {
        background-color: lightcoral;
        transform: translateZ(-75px);
      }
      .box .left {
        background-color: darkmagenta;
        transform: rotateY(-90deg) translateZ(75px);
      }
      .box .right {
        background-color: paleturquoise;
        transform: rotateY(90deg) translateZ(75px);
      }
      .box .top {
        background-color: salmon;
        transform: rotateX(90deg) translateZ(75px);
      }
      .box .bottom {
        background-color: blue;
        transform: rotateX(-90deg) translateZ(75px);
      }

显示效果：htm

第三步设置动画：blog

       在.box中设置：animate
      animation: move 5s ease infinite alternate;
   

      @keyframes move {
        from {
          transform: rotateX(45deg) rotateY(45deg);
        }
        to {
          transform: rotateX(270deg) rotateY(270deg);
        }
      }

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .box {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 200px auto;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
        animation: move 5s ease infinite alternate;
      }
      @keyframes move {
        from {
          transform: rotateX(45deg) rotateY(45deg);
        }
        to {
          transform: rotateX(270deg) rotateY(270deg);
        }
      }

      .box > div {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
      }
      .box .front {
        background-color: lawngreen;
        transform: translateZ(75px);
      }
      .box .back {
        background-color: lightcoral;
        transform: translateZ(-75px);
      }
      .box .left {
        background-color: darkmagenta;
        transform: rotateY(-90deg) translateZ(75px);
      }
      .box .right {
        background-color: paleturquoise;
        transform: rotateY(90deg) translateZ(75px);
      }
      .box .top {
        background-color: salmon;
        transform: rotateX(90deg) translateZ(75px);
      }
      .box .bottom {
        background-color: blue;
        transform: rotateX(-90deg) translateZ(75px);
      }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>