Css 如何将视口旋转180度？

我想知道在视口旋转180度的情况下，实现这种效果的最简单方法是什么（最好是使用CSS）。示例如下：

---

（注意：此网站已不再有效，请不要像我一样浪费时间查找。）

如果您想悬停，可以使用以下代码：

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}

<div id="container_2">This box should be rotated 90&deg; on hover.</div>

#容器2{
边框：1px实心；
填充：.5em；
宽度：5em；
身高：5公分；
过渡：.3s全部；/*逐渐旋转，而不是立即旋转*/
}
#容器2：悬停{
-webkit变换：旋转（90度）；/*以支持Safari和Android浏览器*/
-ms变换：旋转（90度）；/*以支持IE 9*/
变换：旋转（90度）；
}
这个盒子应该旋转90度；悬停。

你能分享你的代码和你的尝试吗？希望这有帮助，谢谢Brett。不幸的是，我还没有尝试过任何东西，因为我不太确定从哪里开始。我发现我可能需要使用Javascript来实现这一点，因为我希望事件在单击时发生。谢谢。我意识到我可能需要使用一些javascript来实现这一点，因为我希望在单击时实现这一点。

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}

<div id="container_2">This box should be rotated 90&deg; on hover.</div>