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 @   雨晨*  阅读(22)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示