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
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 · Intro to CSS 3D transforms › 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
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
W7, chrome funguje
|
||
Chamurappi Profil |
Reaguji na cinka:
Asi používáš mizerné knihovny na zjištění podpory. |
||
Časová prodleva: 11 let
|
0