(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转?
高洛峰
高洛峰 2016-11-02 11:55:44
0
1
837

现在有一个canvas,我希望在(手机和平板)竖屏时能够把它以中心作为旋转原点旋转90°(强制横屏),但用了transform-origin,无论怎样设置数值都不能达到目的,是我哪里搞错了吗?

附CSS代码:

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#main  //div
{
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000000;
    z-index: 10;
}

#live  //在main里面的canvas
{
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    z-index: 20;
}

@media all and (orientation : landscape)
{
    #live
    {
        margin: 0 auto;
        padding: 0;
        display: block;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        z-index: 20;
    }
}

@media all and (orientation : portrait)
{
    #live
    {
        transform: rotate(90deg);
        transform-origin: center center;
        -ms-transform: rotate(90deg); /* Internet Explorer 9 */
        -ms-transform-origin: center center; /* Internet Explorer 9 */
        -moz-transform: rotate(90deg); /* Firefox */
        -moz-transform-origin: center center; /* Firefox */
        -webkit-transform-origin: center center; /* Safari & Chrome */
        -webkit-transform: rotate(90deg); /* Safari & Chrome */
        -o-transform: rotate(90deg); /* Opera */
        -o-transform-origin: center center; /* Opera */
        margin: 0 auto;
        padding: 0;
        display: block;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        z-index: 20;
    }
}

PS: W3C新出的屏幕方向API应该可以实现这个功能,问题是实在太新了,现在的浏览器似乎都不支持,不信你们可以测试下。

(JavaScript)
screen.orientation.lock('landscape');


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(1)
三叔

用transform的话貌似不太好吧,毕竟旋转以后尺寸还得再改一遍

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!