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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。