CSS point de vue ne fonctionne pas
Je suis en train de créer un cube avec les CSS. En fait je pense que c'est déjà là, mais je ne peux pas le voir.
Hésitez pas à modifier le violon.
Je ne comprends pas pourquoi la perspective n'est pas de travail.
Est-ce la meilleure pratique?
Est-il possible de faire tourner le cube dans son ensemble??
Source: 24ways.
HTML:
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
CSS:
.container {
margin: 200px auto;
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
}
#cube figure {
width: 198px;
height: 198px;
display: block;
position: absolute;
border: 1px solid #ddd;
background-color: rgba(0,0,0,0.2);
}
#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }
OriginalL'auteur Maroshii | 2012-02-28
Vous devez vous connecter pour publier un commentaire.
Ont un coup d'oeil à http://css3.bradshawenterprises.com/transforms/#transDemo3.
J'ai un wrapper autour du cube que j'ai tourner - dans ce cas, pour faire simple, j'utilise en fait trois divs, un X, un Y et un pour Z.
L'aire de jeux-dessous devrait vous montrer comment le point de vue travail, etc.
Mon cube ou votre cube? Je peux le voir sur les deux...
Ok. Je peux le voir maintenant.... les deux. J'étais au travail, et apparemment, le PC n'a pas rendu. Est-il même possible? (Je suis sur un MAC maintenant).
Un peu étrange, peut-être qu'il avait un très très vieux navigateur.
OriginalL'auteur Rich Bradshaw
Le problème pourrait être que l'accélération matérielle n'a pas été pris en charge sur votre PC et sur un mac... css3d de transformations telles que
rotateX
etrotateY
besoin de matériel accélérations.dans google chrome, allez dans votre barre d'adresse et entrez
vous verrez
si c'est le cas, alors 3d cube n'est pas visible.
OriginalL'auteur Shoeb Surya
J'ai l'habitude de travailler avec beaucoup de Transformations 3D il y a un moment mais récemment remarqué que CSS3 point de vue n'a aucun effet sur mes navigateurs, y compris Chrome.
Essayé ce qui suit, et il a aidé dans Google Chrome:
Je sais que je suis un peu en retard, mais juste au cas où il pourrait vous aider...
OriginalL'auteur myTerminal