3d正方体 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        perspective: 800px;
        text-align:center;
      }
      .stage {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 400px auto;
        box-shadow: 0 0 15px #000 inset;
        transform-style: preserve-3d;
        transition: 2s;
      }
      /*注意：因为 position，所有的 transform 都是相对于父级元素来变化，因此把父级元素设置为舞台。*/
      .stage:hover {
        transform: rotateY(180deg);
      }
      .stage:hover .face5 {
        transform: translateZ(100px) translateY(-200px);
      }
      .stage:hover .small1 {
        transform: translateZ(100px) translateY(-300px);
      }
      .stage:hover .small2 {
        transform: rotateY(180deg) translateZ(100px) translateY(-300px);
      }
      .stage:hover .small3 {
        transform: rotateY(-90deg) translateZ(100px) translateY(-300px);
      }
      .stage:hover .small4 {
        transform: rotateY(90deg) translateZ(100px) translateY(-300px);
      }
      .stage:hover .small5 {
        transform: rotateX(90deg) translateZ(400px);
      }
      .stage:hover .small6 {
        transform: rotatex(-90deg) translateZ(-200px);
      }
      .face {
        position: absolute;
        width: 200px;
        height: 200px;
        box-shadow: 0 0 20px #554ee9 inset;
        transition: 2s;
      }
      .small {
        position: absolute;
        right: 50px;
        bottom: 0px;
        width: 100px;
        height: 100px;
        box-shadow: 0 0 5px #000 inset;
        transition: 2s;
      }
      .face1 {
        transform: translateZ(100px);
      }
      .face2 {
        transform: rotateY(180deg) translateZ(100px);
      }
      .face3 {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .face4 {
        transform: rotateY(90deg) translateZ(100px);
      }
      .face5 {
        transform: rotateX(90deg) translateZ(100px);
      }
      .face6 {
        transform: rotatex(-90deg) translateZ(100px);
      }
      .small1 {
        transform: translateZ(50px);
      }
      .small2 {
        transform: rotateY(180deg) translateZ(50px);
      }
      .small3 {
        transform: rotateY(-90deg) translateZ(50px);
      }
      .small4 {
        transform: rotateY(90deg) translateZ(50px);
      }
      .small5 {
        transform: rotateX(90deg) translateZ(50px);
      }
      .small6 {
        transform: rotatex(-90deg) translateZ(50px);
      }
    </style>
  </head>

  <body>
    <div class="stage">
      <div class="face1 face">前</div>
      <div class="face2 face">后</div>
      <div class="face3 face">左</div>
      <div class="face4 face">右</div>
      <div class="face5 face">上</div>
      <div class="face6 face">下</div>
      <div class="small1 small">前</div>
      <div class="small2 small">后</div>
      <div class="small3 small">左</div>
      <div class="small4 small">右</div>
      <div class="small5 small">上</div>
      <div class="small6 small">下</div>
    </div>
  </body>
</html>
posted @ 2024-02-23 18:02  雨晨*  阅读(54)  评论(0)    收藏  举报