Correct translateZ coopération avec rotation

Question

J'essaie de créer une interface 3D de fantaisie, mais j'ai trouvé, que le comportement de rotation de l'espace 3D n'est pas ce que je m'attends.

Le problème est le suivant: le carré à bordure verte (dans l'extrait) est un contenant qui devrait tourner en entier. Il a une certaine perspective nécessaire pour l'effet.

Les carrés bleu et noir sont des couches 2D dans l'espace 3D. En tournant le récipient autour de l'axe Y devrait tourner tout son contenu, cependant, par une perspective donnée, tandis que le noir et le bleu ont deux axes Z différents, le spectateur devrait voir, comme la position de leur change.

À des fins de démonstration, j'ai créé un modèle de papier très simple montrant la perspective. Notez les marques noires sur le papier arrière et l'angle d'ombre qui montre l'angle.

Le problème est que le CSS ne gère pas la rotation sur theese éléments traduits et tout est plat, les objets ne se déplace pas entre eux, même si traduit (essayé les deux translateY et translate3d), essayé z-index ...

Maintenant. Je sais, que je peux définir des classes CSS correspondant à des couches, les ajouter à mes éléments et par JS changer dynamiquement leur traduction de différents axes pour créer cet effet.

Cependant, je voudrais trouver une solution de gestion correcte de l'espace 3D plutôt que de le contourner comme ceci. Donc, y a-t-il un moyen CSS, comment le faire fonctionner comme il se doit? Est-ce que je manque une propriété de traduction CSS ou quelque chose?

Voir le comportement de CSS et le code sur l'extrait de code ci-dessous.

Merci.

$(document).on("mousemove", function(event) { 
 
    var dw = $(document).width(); 
 
    var dh = $(document).height(); 
 
    
 
    var transformz = -5+ (event.pageX*(10/dw)); 
 
    var transformbgz = -1+ (event.pageX*(2/dw)); 
 
    var transformdirz = -1+ (event.pageX*(2/dw)); 
 
    var transformdiry = -1+ (event.pageY*(2/dh)); 
 

 
    var transformpy = -7+ (event.pageY*(14/dh)); 
 
    var transformbgpy = -1+ (event.pageY*(2/dh)); 
 

 
    $("#divbg").css("top",transformbgpy-4+"%"); 
 
    $("#divbg").css("left",transformbgz-10+"%"); 
 
// $("#div2").css("transform","rotate3d("+transformdiry+","+transformdirz+",0,"+Math.abs(transformz)+"deg)"); 
 
    $("#div2").css("transform","rotateY("+transformz+"deg) rotateX("+transformpy+"deg)"); 
 
    /* $("#div3").css("transform","translateZ(-20px) rotateY("+transformz+"deg) rotateX("+transformpy+"deg)");*/ 
 

 

 

 
});

* { 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
-moz-osx-font-smoothing: grayscale; 
 
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.55); 
 
} 
 

 
body{margin:0; padding:0; overflow:hidden;} 
 
#div1 { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    height: 100%; 
 
    width:100%; 
 
    border: 1px solid black; 
 
    -webkit-perspective: 300px; /* Chrome, Safari, Opera */ 
 
    perspective: 300px; 
 
    overflow:hidden; 
 
} 
 
#divbg{position:absolute; top:0; left:-20%; width:120%; height:120%; 
 
    background: url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-550412.jpg) 0% 0; 
 
    background-repeat:no-repeat; 
 

 
} 
 

 

 
#div2 { 
 
    width:300px; 
 
    height:150px; 
 
    position: absolute; 
 
    top:10%; 
 
    left:30%; 
 
    border:1px solid #0F0; 
 
    
 

 

 
} 
 

 

 

 
#div3-black{ 
 
    position:absolute; top:70px; left:130px; 
 
    width:100%; 
 
    height:40px; 
 
    background:black; 
 
    border:1px solid #888; 
 
    color:aqua; 
 
    font-size:40px; 
 
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 1); 
 
z-index:1; 
 
transform:translate3d(0px, 0px, -30px); 
 

 

 

 

 
} 
 

 

 
#div3-blue{ 
 
    position:absolute; top:30px; left:150px; 
 
    color:yellow; 
 
    background:aqua; 
 
    position:absolute; 
 
    top:60px; 
 
    left:140px; 
 
width:60px; 
 
height:40px; 
 
    font-size:40px; 
 
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 1); 
 
    z-index:2; 
 

 
transform:translate3d(0px,0px,50px); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div id="divbg"></div> 
 
    <div id="div2"> 
 
    <div id="div3-black"></div> 
 
    
 
    <div id="div3-blue"> 
 
     
 
    </div> 
 

 

 
    </div> 
 
    </div>

Answer 1

Tout ce que vous manquez est

transform-style: preserve-3d; 

J'ai aussi un peu changé votre extrait parce que j'avais des problèmes avec l'image liée

$(document).on("mousemove", function(event) { 
 
    var dw = $(document).width(); 
 
    var dh = $(document).height(); 
 

 
    var transformz = -5 + (event.pageX * (10/dw)); 
 
    var transformbgz = -1 + (event.pageX * (2/dw)); 
 
    var transformdirz = -1 + (event.pageX * (2/dw)); 
 
    var transformdiry = -1 + (event.pageY * (2/dh)); 
 

 
    var transformpy = -7 + (event.pageY * (14/dh)); 
 
    var transformbgpy = -1 + (event.pageY * (2/dh)); 
 

 
    $("#divbg").css("top", transformbgpy - 4 + "%"); 
 
    $("#divbg").css("left", transformbgz - 10 + "%"); 
 
    // $("#div2").css("transform","rotate3d("+transformdiry+","+transformdirz+",0,"+Math.abs(transformz)+"deg)"); 
 
    $("#div2").css("transform", "rotateY(" + transformz + "deg) rotateX(" + transformpy + "deg)"); 
 
    /* $("#div3").css("transform","translateZ(-20px) rotateY("+transformz+"deg) rotateX("+transformpy+"deg)");*/ 
 

 

 

 
});

* { 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.55); 
 
    transform-style: preserve-3d; 
 
} 
 

 
body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
#div1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    -webkit-perspective: 300px; 
 
    /* Chrome, Safari, Opera */ 
 
    perspective: 300px; 
 
    overflow: hidden; 
 
} 
 

 
#divbg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -20%; 
 
    width: 120%; 
 
    height: 120%; 
 
    background-image: linear-gradient(45deg, green, blue); 
 
    background-repeat: no-repeat; 
 
} 
 

 
#div2 { 
 
    width: 300px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 30%; 
 
    border: 1px solid #0F0; 
 
} 
 

 
#div3-black { 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 130px; 
 
    width: 100%; 
 
    height: 40px; 
 
    background: black; 
 
    border: 1px solid #888; 
 
    color: aqua; 
 
    font-size: 40px; 
 
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 1); 
 
    z-index: 1; 
 
    transform: translate3d(0px, 0px, -30px); 
 
} 
 

 
#div3-blue { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 150px; 
 
    color: yellow; 
 
    background: aqua; 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 140px; 
 
    width: 60px; 
 
    height: 40px; 
 
    font-size: 40px; 
 
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 1); 
 
    z-index: 2; 
 
    transform: translate3d(0px, 0px, 50px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div id="divbg"></div> 
 
    <div id="div2"> 
 
    <div id="div3-black"></div> 
 

 
    <div id="div3-blue"> 
 

 
    </div> 
 

 

 
    </div> 
 
</div>