移动端HTML如何做强制横屏效果？

移动端HTML如何做强制横屏效果？就是页面一打开就是横屏的，现在页面横屏了，可是里面的子元素不横屏，我就奇怪了，我看别人写的都可以我跟写的就不行，我还对比了样式，也没看出来哪里不一样

<div>
 <img src="1.jpg" />
</div>

div{
    width: 736px;
    height: 414px;
    transform: rotate(90deg);
    transform-origin: 207px 207px;
}

div img{
   height:100vw;
   width:auto;
}

有谁知道是怎么回事吗？