1

我的旧 XP 系统上的 NVIDIA Quadro FX 1500 图形适配器相当旧,似乎不在受支持的 Chrome HW 列表中;但是,我设法在 Chrome 上启用了 3d 转换,使用以下方法:

  1. 在地址栏中,转到 chrome://flags/
  2. 覆盖软件渲染列表 -> 启用

现在我正在寻找类似的技巧来在 Opera 12.16 上启用 3d css。

使用此页面完成测试:http: //jsfiddle.net/amustill/Qh8YV/,它显示了一个简单的 3d 旋转 div。该测试在 FF、Safari、Chrome 上成功,但在 Opera 上失败。

与这个简单的测试类似的结果:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .outer {
            background-color: gold;
            width: 200px;
            height: 200px;
            position: relative;

            perspective: 300px;
            perspective-origin: 50% 50%;
            transform-style: preserve-3d;

            -o-perspective: 300px;
            -o-perspective-origin: 50% 50%;
            -o-transform-style: preserve-3d;

            -webkit-perspective: 300px;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
        }
        .inner {
            text-align: center;
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
            font-family: Arial;
            font-weight: bold;

            transform: rotateY(45deg);
            -o-transform: rotateY(45deg);
            -webkit-transform: rotateY(45deg);
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="inner">
        is this 3d?<br>
        is this 3d?<br>
        is this 3d?<br>
        is this 3d?<br>
        is this 3d?<br>
    </div>
</div>

</body>
</html>

div 在 Opera 上没有旋转。

在 Opera 的错误控制台中,我发现了这些消息:

        perspective is an unknown property
              perspective: 300px;
  ------------------------^ Inlined stylesheet  3d.html:12
        perspective-origin is an unknown property
              perspective-origin: 50% 50%;
  -------------------------------^  Inlined stylesheet  3d.html:13
        transform-style is an unknown property
              transform-style: preserve-3d;
  ----------------------------^ Inlined stylesheet  3d.html:14
        -o-perspective is an unknown property
              -o-perspective: 300px;
  ---------------------------^  Inlined stylesheet  3d.html:16
        -o-perspective-origin is an unknown property
              -o-perspective-origin: 50% 50%;
  ----------------------------------^   Inlined stylesheet  3d.html:17
        -o-transform-style is an unknown property
              -o-transform-style: preserve-3d;
  -------------------------------^  Inlined stylesheet  3d.html:18
        -webkit-perspective is an unknown property
              -webkit-perspective: 300px;
  --------------------------------^ Inlined stylesheet  3d.html:20
        -webkit-perspective-origin is an unknown property
              -webkit-perspective-origin: 50% 50%;
  ---------------------------------------^  Inlined stylesheet  3d.html:21
        -webkit-transform-style is an unknown property
              -webkit-transform-style: preserve-3d;
  ------------------------------------^ Inlined stylesheet  3d.html:22
        Unrecognized function
              transform: rotateY(45deg);
  --------------------------------------^   Inlined stylesheet  3d.html:35
        Invalid value for property: transform
              transform: rotateY(45deg);
  --------------------------------------^   Inlined stylesheet  3d.html:35
        Unrecognized function
              -o-transform: rotateY(45deg);
  -----------------------------------------^    Inlined stylesheet  3d.html:36
        Invalid value for property: -o-transform
              -o-transform: rotateY(45deg);
  -----------------------------------------^    Inlined stylesheet  3d.html:36
        Unrecognized function
              -webkit-transform: rotateY(45deg);
  ----------------------------------------------^   Inlined stylesheet  3d.html:37
        Invalid value for property: -webkit-transform
              -webkit-transform: rotateY(45deg);
  ----------------------------------------------^

铬,火狐:
火狐

歌剧:
歌剧

问题:

  1. Opera 是否支持 3d 转换?
  2. 如果是:问题可能是什么 - 旧硬件?,代码?
  3. 有解决方法吗?
4

1 回答 1

3

让我也将其作为答案发布,以便在更显眼的位置可见。

Opera 12 和更早版本支持 CSS 3D 变换,它们从 Opera 15 开始可用,它或多或少是基于 Chromium 的新浏览器。

所以不用担心,没有解决方法,它根本不受支持。

http://my.opera.com/securitygroup/blog/2013/07/02/opera-15 http://dev.opera.com/articles/view/understanding-3d-transforms/

于 2013-07-23T00:59:24.800 回答