如何让盒子水平旋转并全屏展示

要让一个盒子水平旋转并全屏展示，可以使用CSS3中的transform属性和fullscreen API。

首先，将盒子设置为全屏状态可以使用JavaScript中的fullscreen API来实现，代码如下：

var elem = document.documentElement;
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
  elem.msRequestFullscreen();
}

接下来，要让盒子水平旋转，可以使用CSS3中的transform属性，并设置rotateY属性。代码如下：

.box {
  transform: rotateY(180deg);
}

这样就可以实现水平旋转的效果了。最后，将盒子设置为全屏状态，再应用旋转效果即可实现盒子水平旋转并全屏展示的效果。

完整的代码如下：

HTML：

<div class="box">
  <!-- 盒子内容 -->
</div>

JavaScript：

var elem = document.documentElement;
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
  elem.msRequestFullscreen();
}

var box = document.querySelector('.box');
box.style.transform = 'rotateY(180deg)';

CSS：

.box {
  /* 盒子样式 */
}