在Chrome中启用透视CSS转换?

Tan*_*ang 4 css 3d transform cross-browser webkit-transform

当我用#board(灰色的)时使用这种风格

-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);
Run Code Online (Sandbox Code Playgroud)

它在Firefox中看起来如何:
点击我查看图片(很抱歉我是新用户.)

但是在chrome中:
点击我查看图片

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

amu*_*ill 5

通常,最佳做法是将其perspective放置在包含元素上,例如body包装或包装div.

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

body {
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
    }

div {
    ...
    -webkit-transform: rotateX(45deg);
       -moz-transform: rotateX(45deg);
    }
Run Code Online (Sandbox Code Playgroud)

  • 亲爱的@amustill,谢谢你回答我的问题.我在Firefox和Chrome中尝试过它.它仍然可以在Firefox中运行良好,但**只显示chrome**中的矩形.(我想要的是一个类似梯形的视图.) (2认同)