【问题标题】:Enabling perspective CSS transform in Chrome?在 Chrome 中启用透视 CSS 转换?
【发布时间】:2013-01-05 21:18:35
【问题描述】:

当我将这种风格与#board(灰色)一起使用时

-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);

在 Firefox 中的样子:

但在 chrome 中:

我们需要的是 Firefox 中的那个。那么我们应该怎么做才能在 chrome 中拥有相同的外观呢?

【问题讨论】:

    标签: css 3d cross-browser transform webkit-transform


    【解决方案1】:

    通常最好将perspective 放在包含元素上,例如body 或包装div

    演示:http://jsfiddle.net/amustill/Qh8YV/

    body {
        -webkit-perspective: 500px;
           -moz-perspective: 500px;
        }
    
    div {
        ...
        -webkit-transform: rotateX(45deg);
           -moz-transform: rotateX(45deg);
        }
    

    【讨论】:

    • 亲爱的@amustill,感谢您回答我的问题。我已经在 Firefox 和 Chrome 中尝试过。它在 Firefox 中仍然运行良好,但 在 chrome 中仅显示一个矩形。(我想要的是类似梯形的视图。)
    • @TangentChang 您使用的是哪个版本的 Chrome?我在 Firefox 和 Chrome 中都看到了预期的相同结果。这种语法应该可以追溯到 Firefox 10 和 Chrome 12。
    • 我使用的是最新的 Chrome 24.0.1312.56 m。
    • @TangentChang 所以你没有看到这样的东西吗? i.imgur.com/5pQc7UP.png我使用的是完全相同版本的 Chrome。
    • 我看不到那个,而是一个矩形。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-03-03
    • 1970-01-01
    • 2015-03-29
    • 2016-11-21
    • 1970-01-01
    • 1970-01-01
    • 2013-02-04
    相关资源
    最近更新 更多