在Chrome中启用透视CSS转换?

时间:2013-01-22 15:25:39

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

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

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

Firefox的外观:
Click me to see the picture(Sorry that I am a new user.)

但在铬中:
Click me to see the picture

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

1 个答案:

答案 0 :(得分: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);
    }