css3 Transform-Herkunft Problem in 3D-Würfel

Ich habe Css-Cube und seine rotierenden auf :hover erstellt.css3 Transform-Herkunft Problem in 3D-Würfel

Aber seine Drehung basiert auf einer Seite des Würfels!

Ich möchte es aus der Mitte drehen, like in this example. Ich habe versucht, transform-origin Eigenschaft, aber nicht erwünschte Ergebnis.

Ich habe auch versucht, eine mittlere Ebene in Würfel setzen, aber Hover funktioniert nicht in dieser Situation!

.contain { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-perspective: 500px; 
 
    perspective: 500px; 
 
    position: absolute; 
 
} 
 
.main { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    margin:100px 100px; 
 
    background:#07a; 
 
    overflow:visible; 
 
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5); 
 
    transition-duration: 700ms; 
 
    -moz-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    transform-origin: center center; 
 
} 
 

 
.main:hover{ 
 
    transform:rotateY(180deg); 
 
} 
 

 
.top, .right, .left, .bottom,.lid{ 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    z-indexd:999; 
 
    transition: all 1s ease; 
 
} 
 
.top { 
 
    background:crimson; 
 
    top:-100px; 
 
    transform-origin : 50% 100%; 
 
    transform:rotateX(-90deg); 
 
} 
 
.bottom { 
 
    background:crimson; 
 
    bottom:-100px; 
 
    transform-origin :100% 0%; 
 
    transform:rotateX(90deg); 
 
} 
 
.left { 
 
    background:#ccc; 
 
    left:-100px; 
 
    transform-origin :100% 0%; 
 
    transform:rotateY(90deg); 
 
} 
 
.right { 
 
    background:#ccc; 
 
    right:-100px; 
 
    transform-origin : 0% 0%; 
 
    transform:rotateY(-90deg); 
 
} 
 
.lid { 
 
    background:#07a; 
 
    transform: translateZ(170px); 
 
    transform-origin : 0% 0%; 
 
    transform:translateZ(100px); 
 
}

<div class="contain"> 
 
      <div class="main"> 
 
       <div class="lid"></div> 
 
       <div class="top"></div> 
 
       <div class="right"></div> 
 
       <div class="left"></div> 
 
       <div class="bottom"></div> 
 
      </div> 
 
     </div>

Quelle

2014-12-18 Suresh

online Komm ist bin ich auf. Ich habe deine Bearbeitung hier vor 2 Minuten gesehen. –

Das Problem besteht darin, dass Sie den Transformationsursprung in der Mitte des Würfels festlegen müssen und der Würfel ein 3D-Element ist. Sie vermissen die 3. Dimension!

So sollte es

transform-origin: center center 50px;

sein, da Ihre Würfelseite 100px

.contain { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-perspective: 500px; 
 
    perspective: 500px; 
 
    position: absolute; 
 
} 
 
.main { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    margin:100px 100px; 
 
    background:#07a; 
 
    overflow:visible; 
 
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5); 
 
    transition-duration: 700ms; 
 
    -moz-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    transform-origin: center center 50px; 
 
} 
 

 
.main:hover{ 
 
    transform:rotateY(180deg); 
 
} 
 

 
.top, .right, .left, .bottom,.lid{ 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    z-indexd:999; 
 
    transition: all 1s ease; 
 
} 
 
.top { 
 
    background:crimson; 
 
    top:-100px; 
 
    transform-origin : 50% 100%; 
 
    transform:rotateX(-90deg); 
 
} 
 
.bottom { 
 
    background:crimson; 
 
    bottom:-100px; 
 
    transform-origin :100% 0%; 
 
    transform:rotateX(90deg); 
 
} 
 
.left { 
 
    background:#ccc; 
 
    left:-100px; 
 
    transform-origin :100% 0%; 
 
    transform:rotateY(90deg); 
 
} 
 
.right { 
 
    background:#ccc; 
 
    right:-100px; 
 
    transform-origin : 0% 0%; 
 
    transform:rotateY(-90deg); 
 
} 
 
.lid { 
 
    background:#07a; 
 
    transform: translateZ(170px); 
 
    transform-origin : 0% 0%; 
 
    transform:translateZ(100px); 
 
}

<div class="contain"> 
 
      <div class="main"> 
 
       <div class="lid"></div> 
 
       <div class="top"></div> 
 
       <div class="right"></div> 
 
       <div class="left"></div> 
 
       <div class="bottom"></div> 
 
      </div> 
 
     </div>

Quelle

2014-12-26 08:56:59 vals

danke mann! das funktioniert jetzt! Transform-Herkunft ist für mich immer verwirrend! Bitte erläutern Sie, wie es in diesem Beispiel funktioniert, wenn Sie Zeit haben! – Suresh

Glücklich, dass es geholfen hat! Ich habe bereits am Anfang der Antwort erklärt, wie es funktioniert. Der Transformationsursprung muss in der Mitte des Würfels sein, sonst sieht er beim Drehen seltsam aus. Und du hast es in x und y auf die Mitte gesetzt, aber nicht in der z-Koordinate. Da dein Element keine Tiefe hat, funktioniert center hier nicht, du musst es explizit setzen (50px) – vals

Ich habe eine translateZ die Drehachse zu bewegen, es sieht ein wenig mehr zentriert, aber immer noch nicht Desandro Ex mögen.,

ich die Dokumentation zu lesen und ich denke, Sie sollten Checkout this! es erklärt ein wenig über orgins und Perspektiven ...

EDIT1: integrierte translateZ ins tead Ursprungs Transformation (jetzt ist es perfekt !!)

.contain { 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-perspective:666px; 
 
    perspective: 666px; 
 
    position: absolute; 
 
} 
 
.main { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    margin:100px 100px; 
 
    background:#07a; 
 
    overflow:visible; 
 
    transition: all 1s ease; 
 
    -moz-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    transform:translateZ(-50px) 
 
    
 
    
 
} 
 

 
.main:hover{ 
 
    transform: translateZ(-50px) rotateY(180deg); 
 
    
 
    
 
} 
 

 
.top, .right, .left, .bottom,.lid,.front{ 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    z-index:999; 
 
    transition: all 1s ease; 
 
} 
 
.front{ 
 
    background:yellow; 
 
    transform:rotateY(0deg) translateZ(50px); 
 
} 
 
.left { 
 
    background:red; 
 
    transform:rotateY(90deg) translateZ(50px); 
 
} 
 
.right { 
 
    background:purple; 
 
    right:-100px; 
 
    //transform-origin : 0% 0%; 
 
    transform:rotateY(-90deg) translateZ(150px); 
 
} 
 
.lid { 
 
    background:green; 
 
    transform:rotateY(180deg) translateZ(50px); 
 
    
 
}

<div class="contain"> 
 
      <div class="main"> 
 
       <div class="front"></div> 
 
       <div class="lid"></div> 
 
       <div class="right"></div> 
 
       <div class="left"></div> 
 
      </div> 
 
     </div>

BTW CSS-Transformationen Rock !!

Quelle

2014-12-18 12:26:15 maioman

Ich habe versucht, "translateZ (-70px)" in der ".main: hover" hinzufügen und ich denke, es dreht sich zentriert.

Mit diesem wird, wenn Ihr Würfel rotiert, machen Sie die Übersetzung einige Pixel nach links und machen Sie das Gefühl, dass es zentriert ist.

Quelle

2014-12-18 12:53:52 psyv

css3 Transform-Herkunft Problem in 3D-Würfel

Antwort

Verwandte Themen