Autor Zpráva
cink
Profil
#1 · Zasláno: 1. 10. 2013, 14:29:53 · Upravil/a: Moderátor (editace znemožněna) 1. 10. 2013, 17:29:50
Odpovědět Citovat
Ahoj, mám problém (překvapivě):
mám kostku, na kterou se kouknu v Google Chrome.
Na některých počítačích s Windows 7 to funguje. Na některých ne. Ve Windows XP už vůbec.
Obrázek ve Windows XP.
Vidíte, že je to otevřené v Google Chrome, ale pořád mi to hlásí:
Originální Text: Sorry, your browser does not support CSS 3D transforms. Try viewing this page in Safari, Chrome, Firefox Aurora, or on an iOS device.
Překlad: Pardon, Váš prohlížeč nepodporuje CSS 3D transformace. Zkuste se podívat na stránku v Safari, Chorme, Firefox Aurora, nebo na iOS nástrojích.
(promiňte za špatný překlad)

Jak to může fungovat i ve starších verzích Windows?

Zdrojový kód: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  
  <!-- disable zooming -->
  <meta name="viewport" content="initial-scale=1.0, user-scalable=0" />
  
  <title>Cube 2 - show sides &middot; Intro to CSS 3D transforms &rsaquo; Examples</title>
  
  <link rel="stylesheet" href="http://desandro.github.io/3dtransforms/css/style.css" media="screen" />


    <style media="screen">

    .container {
      width: 200px;
      height: 200px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1000px;
         -moz-perspective: 1000px;
           -o-perspective: 1000px;
              perspective: 1000px;
    }

    #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    #cube figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
    }

    #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
    #cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
    #cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
    #cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
    #cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
    #cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

    #cube .front  {
      -webkit-transform: translateZ( 100px );
         -moz-transform: translateZ( 100px );
           -o-transform: translateZ( 100px );
              transform: translateZ( 100px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 100px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 100px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 100px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 100px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 100px );
    }

    #cube.show-front {
      -webkit-transform: translateZ( -100px );
         -moz-transform: translateZ( -100px );
           -o-transform: translateZ( -100px );
              transform: translateZ( -100px );
    }
    #cube.show-back {
      -webkit-transform: translateZ( -100px ) rotateX( -180deg );
         -moz-transform: translateZ( -100px ) rotateX( -180deg );
           -o-transform: translateZ( -100px ) rotateX( -180deg );
              transform: translateZ( -100px ) rotateX( -180deg );
    }
    #cube.show-right {
      -webkit-transform: translateZ( -100px ) rotateY(  -90deg );
         -moz-transform: translateZ( -100px ) rotateY(  -90deg );
           -o-transform: translateZ( -100px ) rotateY(  -90deg );
              transform: translateZ( -100px ) rotateY(  -90deg );
    }
    #cube.show-left {
      -webkit-transform: translateZ( -100px ) rotateY(   90deg );
         -moz-transform: translateZ( -100px ) rotateY(   90deg );
           -o-transform: translateZ( -100px ) rotateY(   90deg );
              transform: translateZ( -100px ) rotateY(   90deg );
    }
    #cube.show-top {
      -webkit-transform: translateZ( -100px ) rotateX(  -90deg );
         -moz-transform: translateZ( -100px ) rotateX(  -90deg );
           -o-transform: translateZ( -100px ) rotateX(  -90deg );
              transform: translateZ( -100px ) rotateX(  -90deg );
    }
    #cube.show-bottom {
      -webkit-transform: translateZ( -100px ) rotateX(   90deg );
         -moz-transform: translateZ( -100px ) rotateX(   90deg );
           -o-transform: translateZ( -100px ) rotateX(   90deg );
              transform: translateZ( -100px ) rotateX(   90deg );
    }

  </style>

</head>
<body>

  <h1>Cube 2 - show sides</h1>

  <section class="container">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="back">6</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
      <figure class="top">5</figure>
      <figure class="bottom">2</figure>
    </div>
  </section>

  <section id="options">

    <p id="show-buttons">
      <button class="show-front">Show 1</button>
      <button class="show-bottom">Show 2</button>
      <button class="show-right">Show 3</button>
      <button class="show-left">Show 4</button>
      <button class="show-top">Show 5</button>
      <button class="show-back">Show 6</button>
    </p>

    <p>
      <button id="toggle-backface-visibility">Toggle Backface Visibility</button>
    </p>


  </section>

  <script src="http://desandro.github.io/3dtransforms//js/utils.js"></script>
  <script src="http://desandro.github.io/3dtransforms//js/rotate-box.js"></script>

  
  <footer>
    <p id="disclaimer">Sorry, your browser does not support CSS 3D transforms. Try viewing this page in <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/channel/">Firefox Aurora</a>, or on an iOS device.</p>
    <p>Example for <a href="../">Intro to CSS 3D transforms</a> by David DeSandro</p>
  </footer>
</body>
</html>
pako
Profil *
#2 · Zasláno: 1. 10. 2013, 14:39:39
Odpovědět Citovat
WinXP, Firefox 23, kocka funguje. Bude skor zalezat na prehliadaci a nie na systeme, ci podporuje css3 https://developer.mozilla.org/en-US/docs/Web/CSS/transform
clousseau
Profil
#3 · Zasláno: 1. 10. 2013, 14:52:43
Odpovědět Citovat
W7, chrome funguje
Chamurappi
Profil
#4 · Zasláno: 1. 10. 2013, 15:25:04 · Upravil/a: Chamurappi 1. 10. 2013, 17:29:58
Odpovědět Citovat
Reaguji na cinka:
Asi používáš mizerné knihovny na zjištění podpory.
Časová prodleva: 11 let

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0