Question

我正在使用基于three.js的网站，并在three.js画布上使用HTML div来显示菜单和信息。但是我发现3D trasnformed div在iOS浏览器和OSX safari上的three.js画布上以奇怪的方式切片。在chrome和Firefox（osx）上按预期工作。

我设置了一个codepen来说明three.js库的基本多维数据集示例的问题。 http://codepen.io/theguaz/pen/jrGvPX

<--------HTML----------->

<body>
<div id="hitosMenu">

                <ul id="hitosMenu-ul">
                    <li class="hitosItem" dataID="0"><p>01. CALLE MARCO AURELIO</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="1"><p>02. ESCALERA BOCACCIO</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="2"><p>03. FARO AZUL</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="3"><p>04. PLAZA BISMARCK</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="4"><p>05.ATAHUALPA</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="5"><p>06. SALTO HOTEL</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="6"><p>07. CALLE ELÍAS</p><p>SALTO</p></li>
                    <li class="hitosItem" dataID="7"><p>08. PERGOLA/META</p><p>SALTO</p></li>

                </ul>

            </div>
</body>


<--------CSS------->

body {
    margin: 0px;
    background-color: #000000;
    overflow: hidden;
}
#hitosMenu{
  position:absolute;
    width:450px;
    height:450px;

    margin-left: auto;
    margin-right: auto;
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' width='587.6px' height='622.8px' xml:space='preserve'> <polygon id='XMLID_1_' opacity='0.9' fill='%23001A71' points='102.6,0 587.6,0 483.7,622.8 0,622.8 '/> </svg>")  no-repeat;
    background-size:400px;
    background-position: 0px 0px; 

}

ul#hitosMenu-ul  {
    list-style-type: none;
    margin: 0;
    width:65%;
    padding-top: 5px;
    padding-left: 0;
}

ul#hitosMenu-ul li {
    color: white;
    text-decoration: none;;
    font-size: 14px;
    display: block;
    line-height: 20px;
    padding: 0px;
    cursor: pointer;
}


ul#hitosMenu-ul li p:nth-child(1){
    height:0px;
    padding: 0px;
}
ul#hitosMenu-ul li p:nth-child(1){
    font-family: "RedBullSiri-Black",sans-serif;
    font-style: normal;

    color:#999966;
}

ul#hitosMenu-ul li p:nth-child(2){
    font-family: "futura-pt",sans-serif;
    font-style: normal;
    font-weight: 300;

    font-size: 10px;
    width:100%;
    padding: 0;
    border-style: solid;
    border-bottom: 1px solid #ffcd10;
    border-left: none;
    border-right: none;
    border-top: none;
    color:#FFFFA9;

}

<--------JS------>


  var camera, scene, renderer;
            var mesh;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;

                scene = new THREE.Scene();

                var texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' );

                var geometry = new THREE.BoxGeometry( 400, 400, 400 );
                var material = new THREE.MeshBasicMaterial( { map:texture } );

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );
  mesh.position.x = 0;
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;

                renderer.render( scene, camera );

            }
var hitosOrig = "50% 50%";
TweenMax.to($("#hitosMenu"), .55, {delay:.35, css:{autoAlpha:.85,  transformOrigin:hitosOrig, transformPerspective:-1000, rotationY:-16}});

我可能做错了什么？。

CSS3 3D转换的div在iOS和＆amp ;; OSX Safari

0 个答案: