[IE] Preserve-3d - Softwareontwikkeling

Vraag

woensdag 3 augustus 2016 17:06

Acties:

0 Henk 'm!

Topicstarter

De Quickstart

[IE] Preserve-3d workaround

Check: Verzin een goede topictitel die zo duidelijk mogelijk aangeeft wat de inhoud van je topic is.
Dus bijvoorbeeld niet "[Windows] Profielprobleem" maar "[Vista] Profielwijzigingen worden niet opgeslagen".

Afhankelijk van het subforum waar je je vraag wil stellen kan een zogeheten tag ("Vista" in het hierboven genoemde voorbeeld) wenselijk zijn. Controleer dit even in de huidige lijst met topics en in de plaatselijke beleidstopics.

Ik werk momenteel aan een 3d spincude, deze lijkt in alle browsers te werken behalve IE10. In deze browser word slechts 1 van de sides/afbeeldingen gespiegeld getoond.
De wens is dat er in IE10 continu 1 slide (ongespiegeld) zichtbaar is, desnoods niet in 3D.

Check: Geef eerst globaal aan wat het probleem is.

Ik denk dat het eraan ligt dat IE10 geen Preserve-3d ondersteund (link)

Check: Geef vervolgens aan waar je denkt dat het aan ligt.

Ik heb deze oplossing gevonden, ik weet alleen niet hoe ik dit moet implementeren. Het lukt me niet deze oplossing te vertalen naar mijn '3d cube' file. (wellicht omdat m'n HTML kennis te beperkt is.)

HTML: index.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <script type="text/javascript" src="js/tweenlite/tweenlite.js"></script>
        <script type="text/javascript" src="js/tweenlite/plugins/CSSPlugin.min.js"></script>
        <script type="text/javascript" src="js/tweenlite/easing/EasePack.min.js"></script>
        <script type="text/javascript" src="js/cube.min.js"></script>
        <link rel="stylesheet" href="css/cube.css">

      <!-- disable zooming -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=0">
        <title>Cube</title>
    </head>


    <body onLoad="init()">


      <div id="container">
      <div id="arrowLeft"></div>
      <div id="arrowRight"></div>
        <div id="swipeIcon"></div>
            <div id="cubeContainer">
                <div id="cube" class="show-front">
                  <side id="front"></side>
                  <side id="back"></side>
                  <side id="right"></side>
                  <side id="left"></side>
                </div>
            </div>
        </div>

        <script>
        function clicktags(){
            EB.clickthrough("click front");
            EB.clickthrough("click left");
            EB.clickthrough("click right");
            EB.clickthrough("click back");
        }
        </script>
        <script>
        document.addEventListener('touchstart', handleTouchStart, false);        
        document.addEventListener('touchmove', handleTouchMove, false);

        var xDown = null;                                                        
        var yDown = null;                                                        

        function handleTouchStart(evt) {                                         
            xDown = evt.touches[0].clientX;                                      
            yDown = evt.touches[0].clientY;                                      
        };                                                

        function handleTouchMove(evt) {
            if ( ! xDown || ! yDown ) {
                return;
            }

            var xUp = evt.touches[0].clientX;                                    
            var yUp = evt.touches[0].clientY;

            var xDiff = xDown - xUp;
            var yDiff = yDown - yUp;

            if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
                if ( xDiff > 0 ) {
                    EB.userActionCounter("right swipe");
                } else {
                    EB.userActionCounter("left swipe");
                }                       
            } else {
                if ( yDiff > 0 ) {
                    EB.userActionCounter("right swipe");
                } else { 
                    EB.userActionCounter("left swipe");
                }                                                                 
            }
            /* reset values */
            xDown = null;
            yDown = null;                                             
        };    
    </script>        
    </body>
</html>

Cascading Stylesheet: cube.css

html, body{
    margin:0;
    padding:0;
    width:320px;
    height:100px;
}

#container {
    margin:0;
    overflow:hidden;
    position:relative;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

#cubeContainer {
    width: inherit;
    height: inherit;
    position:relative;
    z-index:1;
}

#arrowLeft {
    position: absolute;
    top:95px;
    left:0px;
    width: 40px;
    height: 60px;
    background-image: url(../images/arrow.png);
    background-size: 100% 100%;
    z-index: 9999;
    cursor: pointer;
}
#arrowRight {
    position:absolute;
    top:95px;
    right:0px;
    width: 40px;
    height: 60px;
    background-image: url(../images/arrow.png);
    background-size: 100% 100%;
     -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);    
    z-index: 9999;
    cursor: pointer;
}

#swipeIcon {
    display: block;
    position:absolute;
    width:124px;
    height:124px;
    background-image:url(../images/swipe_icon.png);
    background-repeat:no-repeat;
    z-index:2;
}


#cube {
    display:none;
    width: inherit;
    height: inherit;

    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
}


#cube side {
    position: absolute;
    margin: 0;
    width: inherit;
    height: inherit;

    -webkit-backface-visibility:preserve-3d;
    -moz-backface-visibility:preserve-3d;
    -o-backface-visibility:preserve-3d;
    backface-visibility:preserve-3d;
}


.easeInOut{
    -webkit-transition-timing-function:ease-int-out;
    -moz-transition-timing-function:ease-int-out;
    -ms-transition-timing-function:ease-int-out;
    -o-transition-timing-function:ease-int-out;
    transition-timing-function:ease-int-out;
}

.easeOut{
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}

Check: Geef daarna aan wat je al geprobeerd hebt om zelf tot een oplossing te komen.
Een duidelijke omschrijving geven van dingen die je al geprobeerd hebt voorkomt ook dat mensen tips geven die voor jou oude koek zijn.

Geef aan waarom je denkt dat jouw oplossing niet werkt of geef aan waarom je denkt dat dat niet werkt.
Je eigen oplossing heeft niet gewerkt. Als je begrijpt waarom niet, vertel dit dan. Als je dat niet begrijpt, kun je dat als "subvraag" in je topicstart opnemen.

Geef altijd aan wat voor eventuele foutmeldingen of waarschuwingen je krijgt.

Kan iemand mij een zetje in de juiste richting geven?

Mocht dit topic niet aan de regels voldoen, dan zal ik m'n vraag in vraag & aanbod plaatsen.

[ Voor 3% gewijzigd door RVE_NL op 03-08-2016 17:15 ]

Reageer