[分享]css3手机旋转90度

CSS3手机旋转90度是一种很常见的操作，这个效果可以通过CSS3的transform属性轻松实现。下面我们来了解具体实现方法。

@media screen and (orientation:portrait) {
    /* 竖屏样式 */
    body {
        /* 设置旋转角度 */
        transform: rotate(0deg); 
    }
}

@media screen and (orientation:landscape) {
    /* 横屏样式 */
    body {
        /* 设置旋转角度 */
        transform: rotate(90deg); 
        /* 调整页面宽度为设备高度 */
        width: 100vh; 
        /* 设置页面高度为设备宽度 */
        height: 100vw; 
        /* 调整页面位置 */
        position: absolute;
        top: 0;
        left: 0;
    }
} 

通过上述代码，我们首先使用@media查询判断设备是否处于横屏或竖屏状态。当设备为竖屏时，页面不需要旋转，因此将旋转角度设置为0度即可；当设备为横屏时，我们需要将页面旋转90度，将页面宽度设置为设备的高度，将页面高度设置为设备的宽度，并将页面位置调整为左上角。

CSS3手机旋转90度效果可以让页面适应横屏状态，增加用户体验，拥有更好的用户体验和美观的设计。