老师请您帮忙检查一下代码谢谢

来源：2-12 空间移动

慕粉1924517932

2021-08-20 10:05:24

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      *{
         padding:0;
         margin: 0;
      }
      .box{
         width:200px;
         height:200px;
         margin:100px auto;
         perspective: 300px;
        /* border: 1px solid #000;*/
         position: relative;
      }
      .box p{
         position:absolute;
         top:0px;
         left:0px;
         width:200px;
         height:200px;
      }
      .box p:nth-child(1){
         background-color:rgb(162, 0, 255,.5);
         /* 前面 */
         transform: translatez(100px);
      }
      .box p:nth-child(2){
         background-color:rgba(0, 4, 255, 0.5);
         /* 顶面 */
         transform: rotatex(90deg) translatez(100px);
      }
      .box p:nth-child(3){
         background-color:rgba(255, 51, 0, 0.5);
         /* 后面 */
         transform: rotatex(180deg) translatez(100px);
      }
      .box p:nth-child(4){
         background-color:rgba(238, 255, 0, 0.5);
         /* 底面 */
        transform: rotatex(-90deg)translatez(100px); 
      }
      .box p:nth-child(5){
         background-color:rgba(0, 195, 255, 0.5);
         /* 侧面 */
         transform: rotatey(90deg) translatez(100px);
      }
      .box p:nth-child(6){
         background-color:rgba(0, 255, 136, 0.5);
         transform: rotatey(-90deg)translatez(100px);
      }
   </style>
</head>
<body>
   <div class="box">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
   </div>
</body>
</html>