如何将视口旋转180度？

-3

我想知道什么是最简单的方式（理想情况下使用CSS）来实现视口旋转180度时的这种效果。例如这里：如何将视口旋转180度？

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

（注：该网站不再住，所以不要浪费你的时间寻找它像我一样。）

来源

2017-10-18 James Miller

你能分享你的代码和你试过的吗？ –

希望这可以帮助http://jsfiddle.net/dreamweiver/x6v60t2f/ – 3gth

谢谢布雷特。不幸的是，我还没有尝试过任何东西，因为我不确定从哪里开始。我已经知道，我可能需要使用Javascript，因为我希望事件发生在点击上。 –

#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); 
}

来源

2017-10-18 05:41:26

如果要悬停那么你可以使用下面的代码：

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

来源

2017-10-18 05:44:15

谢谢。我意识到我可能需要使用一些JavaScript来实现这一点，因为我希望这发生在点击。 –

如何将视口旋转180度？

回答

相关问题