css3 transform-origin проблема в 3D кубе

Question

Я создал css-куб и его вращение на :hover.

Но его вращение основано на одной стороне куба!

Я хочу повернуть его со своего центра, like in this example. Я пытался transform-origin собственности, но не получил желаемого результата.

Я также попытался поставить один средний самолет внутри куба, но наведение не работает в этой ситуации!

.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

Проблема в том, что вам нужно установить начало преобразования в центре куба, а куб - это трехмерный элемент. Вам не хватает 3-го измерения!

Так оно и должно быть

transform-origin: center center 50px; 

, поскольку ваша сторона куба 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

Я добавил translateZ переместить ось вращения, она выглядит немного более сосредоточенным, но до сих пор не нравится экс Desandro в.,

Я прочитал документацию, и я думаю, вы должны checkout this! это немного объясняет, что касается орнов и перспектив ...

EDIT1: интегрированный переводЗ ins TEAD трансформного происхождения (теперь это прекрасно !!)

.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-преобразование рок !!

Answer 3

Я попытался добавить «translateZ (-70px)» в «.main: hover», и я думаю, что он вращается по центру.

При этом, когда ваш куб вращается, переведите несколько пикселей влево и почувствуйте, что он центрирован.