Question

我无法在firefox中使用3d变换转换图像，但我可以在chrome中完成。

我使用的代码是：

<div class="book"><img src="http://www.enderonline.es/productos/968-1_p.jpg"></div>

.book {
position: relative;
-moz-perspective: 100px;
-moz-transform: rotateY(-2deg);
-webkit-transform: perspective(100) rotateY(-2deg);
outline: 1px solid transparent;
box-shadow: none;
margin: 0;
}

以下是示例：http://jsfiddle.net/SE9sG/

我已尽力而为但仍无法正常工作。有什么建议？

提前致谢。

Answer 1

您遇到的问题是您使用perspective作为单独的CSS属性。如果你看here和here，你会发现perspective只是一个＆＃34;命令＆＃34;你可以转到transform。

另一点：如果您查看this，您将看到Firefox版本16的版本，不再需要-moz。

修复相对简单，就像你为chrome（webkit）兼容性做的那样：

.book {
    position: relative;
    transform: perspective(100px) rotateY(-2deg);
    -webkit-transform: perspective(100px) rotateY(-2deg);
    outline: 1px solid transparent;
    box-shadow: none;
    margin: 0;
}

3D转换不适用于Firefox（示例）

1 个答案: