Question

我想知道什么是最简单的方法（理想情况下用CSS）来实现视口旋转180度的效果。示例：

https://www.zakgroup.co.uk/projects/agenzia-indipendente-di-ricerca

（注意：这个网站不再存在，所以不要像我一样浪费你的时间寻找它。）

Answer 1

#container_2 {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
}

#container_2 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

Answer 2

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

#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>

如何将视口旋转180度？

2 个答案: