Problem z przekształceniem css3 w kostkę 3D

Question

Utworzono css-cube i jego obracanie na :hover.

Ale jego obrót opiera się na jednej stronie sześcianu!

Chcę obrócić go od środka, like in this example. Próbowałem właściwości transform-origin, ale nie uzyskałem pożądanego rezultatu.

Próbowałem również umieścić jedną środkową płaszczyznę wewnątrz sześcianu, ale nie działa w tej sytuacji!

.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

Problem polega na tym, że musisz ustawić początek transformacji na środku sześcianu, a sześcian jest elementem 3d. Brakuje trzeciego wymiaru!

Tak powinno być

transform-origin: center center 50px; 

ponieważ Twoja strona kostka jest 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

dodałem translateZ przesunąć oś obrotu, to wygląda trochę bardziej skoncentrowany, ale nadal nie podoba Desandro EX.,

Czytałem dokumentację i myślę, że powinien checkout this! wyjaśnia trochę o orginach i perspektywach ...

EDIT1: zintegrowane tłumaczenia tead od przekształcić pochodzenie (teraz jest idealny !!)

.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 transformacje skała !!

Answer 3

Próbowałem Dodanie "translateZ (-70px)" w ".main: hover" i myślę, że to obracanie jest wyśrodkowane.

W ten sposób, gdy kostka obraca się, przekształć niektóre piksele na lewo i spraw, aby czuła, że ​​jest wyśrodkowana.