2

私は現在、以下に設計されたキューブが必要なプロジェクトに取り組んでいますが、パースペクティブを妨げずに全画面表示にする必要があり、すべてのブラウザーに対して、幅と高さを 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);
}
4

0 に答える 0