不能在Opera 12.16中使用css 3d变换

时间:2013-07-22 13:30:03

标签: css3 opera css-transforms webkit-perspective

我旧版XP系统上的NVIDIA Quadro FX 1500图形适配器相当陈旧,似乎不在支持的Chrome硬件列表中;但是,我设法在Chrome上启用了3d变换,使用:

  1. 在地址栏中,转到chrome:// flags /
  2. 覆盖软件呈现列表 - >使
  3. 现在我正在寻找类似的技巧来在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>
    

    在Opera上没有旋转div。

    在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);
      ----------------------------------------------^
    

    Chrome,Firefox:
    Firefox

    歌剧:
    Opera

    问题:

    1. Opera支持3D转换吗?
    2. 如果是的话:问题是什么 - 旧硬件?代码?
    3. 有解决方法吗?

1 个答案:

答案 0 :(得分:3)

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

Opera 12及更早版本支持CSS 3D Transforms,它们从Opera 15开始提供,它或多或少是基于Chromium的新浏览器。

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

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