手机如何翻转

Question

做了个翻书的效果。横屏才可以观看的。
突然间改了需求，不要求用户横屏，就是需要把手机横着看。不触发手机的横屏事件。也就是说 我之前的横向布局没用了，需要改成竖着的。

用什么属性可以把之前的div都旋转90deg?

Answer 1

CSS3
transform:rotate(7deg);
-ms-transform:rotate(7deg); / IE 9 /
-moz-transform:rotate(7deg); / Firefox /
-webkit-transform:rotate(7deg); / Safari 和 Chrome /
-o-transform:rotate(7deg); / Opera /

但是单独的旋转90deg应该不能解决你的问题，感觉会有BUG。

Answer 2

@media screen and (orientation : landscape) { 
    html {
        width: 100vh;
        height: 100vm;
        transform: rotate(90deg);
        transform-origin: 50vw 50vw;
    }
    .....
}