problema di origine trasformabile css3 in cubo 3D

Question

Ho creato css-cube e la sua rotazione su :hover.

Ma la sua rotazione è basata su un lato del cubo!

Voglio ruotarlo dal suo centro, like in this example. Stavo cercando la proprietà transform-origin ma non ho ottenuto il risultato desiderato.

Ho anche provato a posizionare un piano intermedio nel cubo ma il passaggio del mouse non funziona in quella situazione!

.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>

Answer 1

Il problema è che è necessario impostare l'origine della trasformazione al centro del cubo e il cubo è un elemento 3d. Ti manca la 3a dimensione!

Così dovrebbe essere

transform-origin: center center 50px; 

dal tuo lato cubo è 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>

Answer 2

ho aggiunto un translateZ per spostare l'asse di rotazione, sembra un po 'più centrato, ma ancora non come ex di Desandro.,

ho letto la documentazione e penso che si dovrebbe checkout this! spiega un po 'di orgin e prospettive ...

EDIT1: integrato translateZ ins tead di trasformare la provenienza (ora è perfetto !!)

.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-trasformazioni rock !!

Answer 3

Ho provato ad aggiungere "translateZ (-70px)" in ".main: hover" e penso che sia ruotato centrato.

Con questo si effettuerà quando il cubo sta ruotando, facendo tradurre alcuni pixel a sinistra e percepire che è centrato.