Question

我目前正在开发一个项目，我需要一个下面设计的立方体，但我需要全屏而不打扰透视和所有浏览器，尝试使宽度和高度100％和最大宽度和最大值 - 高度100％，但没有帮助！ html如下。我需要下面给出的相同但是全屏模式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>3D rotation</title>
<link rel="stylesheet" href="3D_cube.css" />
</head>

<body class="experiment">
<script src="../jquery.js"></script>
<!--<script src="3D_cube.js"></script>-->

<div id="wrapper">

<div id="experiment">   
<div id="cube">
    <div class="face one">
        Top
    </div>
    <div class="face three">        
    </div>
    <div class="face four">
    </div>
    <div class="face five">
    </div>
    <div class="face six">
        Bottom
    </div>
</div>  
</div>
</div>

</body>
</html>

相应的样式表由

给出

#experiment {
  width:100%;
  height:100%;
  -webkit-perspective: 700; 
  -webkit-perspective-origin: 50% 200px;

  -moz-perspective: 800; 
  -moz-perspective-origin: 50% 200px;
}
#wrapper{
        width:100%;
        height:100%;
    }

#cube {
  position: relative;
  margin: 100px auto 0;
  height: 400px;
  width: 400px;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;

  -moz-transition: -moz-transform 2s linear;
  -moz-transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  background-color: rgba(50, 50, 50, 0.7);
  font-size: 27px;
  line-height: 1em;
  color: #fff;
  border: 1px solid #555;
  border-radius: 3px;
}   

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(200px);
  -moz-transform: rotateX(90deg) translateZ(200px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  -moz-transform: rotateY(90deg) translateZ(200px);

}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(200px);
  -moz-transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
  -moz-transform: rotateY(-90deg) translateZ(200px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

保持透视完整的立方体全屏 - html css

0 个答案: