vấn đề chuyển đổi css3 gốc trong khối lập phương 3D

Question

Tôi đã tạo css-cube và xoay của nó trên :hover.

Nhưng xoay của nó được dựa trên một mặt của khối lập phương!

Tôi muốn xoay vòng từ giữa của nó, like in this example. Tôi đã cố gắng transform-origin tài sản nhưng không có kết quả mong muốn.

Tôi cũng đã thử đặt một mặt phẳng ở giữa vào khối lập phương nhưng di chuột không hoạt động trong tình huống đó!

.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

Vấn đề là bạn cần đặt nguồn gốc biến đổi ở chính giữa khối lập phương và khối lập phương là phần tử 3d. Bạn đang thiếu thứ nguyên thứ 3!

Vì vậy, nó phải được

transform-origin: center center 50px; 

từ phía cube của bạn là 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

Tôi đã thêm một translateZ để di chuyển các trục quay, có vẻ một chút làm trung tâm hơn nhưng vẫn không thích Desandro của ex.,

Tôi đọc tài liệu và tôi nghĩ bạn nên thanh toán this! giải thích một chút về orgins và quan điểm ...

EDIT1: tích hợp dịchZ ins tead của chuyển đổi nguồn gốc (bây giờ là hoàn hảo !!)

.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-biến đổi đá !!

Answer 3

Tôi đã thử Thêm "translateZ (-70px)" vào ".main: hover" và tôi nghĩ rằng nó xoay xoay ở giữa.

Với điều này sẽ thực hiện khi khối lập phương của bạn đang quay giúp dịch một số pixel sang trái và cảm thấy nó được căn giữa.