CSS3 -webkit-transform: translateZ(xpx) ne fonctionne pas

Désolé si cela semble de base, mais j'ai cherché partout sur le web, et ne pouvait pas trouver une autre réponse (qui me fait penser que je suis en train de faire quelque chose de stupide).

J'ai un parent et un enfant div. J'essaye d'appliquer un CSS3 translateZ de l'enfant, mais rien ne semble se passer.

translateX et translateY de travail, ainsi que de la tourner, mais pas translateZ. Suis-je fou?

Ici un violon: http://jsfiddle.net/Sb55D/1/

<div id="main">
    <div id="child">
        Lorem
    </div>
</div>

#main {
   display: block;
   position: absolute;
   width: 400px; height: 400px;
   border: thin solid red;
   top: 10px;
   left: 10px;
   -webkit-transform-style: preserve-3d;
}

#child {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 300px;
    height: 300px;
    border: thin solid green;
    -webkit-transform: translate(-50%, -50%) translateZ(-400px);
    -webkit-transform-style: preserve-3d;
}
InformationsquelleAutor bencollins | 2013-08-08
  1. 20

    Vous avez besoin d'appliquer perspective à l'élément parent pour translateZ de travail... Essayez d'ajouter quelque chose comme:

    #main {
   display: block;
   position: absolute;
   width: 400px; height: 400px;
   border: thin solid red;
   top: 10px;
   left: 10px;
   /*-webkit-transform-style: preserve-3d; not needed on parent element */
   -webkit-perspective: 1000;
}

    DÉMO

    • Si simple.. merci!
    • Pas de problème... les transformées en z dans l'espace 3d, de sorte que vous avez à lui donner un peu d'espace pour travailler avec!
    • Cliquez sur la coche par les flèches haut et bas pour marquer comme résolu 🙂
    • Pour le bénéfice de toute autre écrémé lecteurs: la clé est d'appliquer perspective à la parent de la traduction de l'élément.
    • correct, la réponse ne sera pas droite jusqu'à ce que fixe.
    • il était encore correcte, juste peut-être pas 100% clair pour les gens qui ne regardent pas à la démo. Mise à jour juste au cas où.

    InformationsquelleAutor brbcoding