如何應用此門的厚度？

Question

請參閱代碼筆中的代碼this link。 我浪費了兩三個小時，決定不再浪費。 我已經試過代碼right here，它不工作。

.coin { 
    background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png"); 
    background-size: 100% 100%; 
    border-radius: 100%; 
    height: 100px; 
    margin: 50px auto; 
    position: relative; 
    width: 100px; 
    -webkit-transition: .5s linear; 
    -webkit-transform-style: preserve-3d; 
} 
.coin:after { 
    background-color: #a37131; 
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25)); 
    bottom: 0; 
    content: ''; 
    left: 45px; 
    position: absolute; 
    top: 0; 
    width: 5px; 
    z-index: -10; 
    -webkit-transform: rotateY(-90deg); 
    -webkit-transform-origin: 100% 50%; 
} 
.coin:before { 
    background-color: #a37131; 
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25)); 
    border-radius: 100%; 
    content: ''; 
    height: 100px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100px; 
    -webkit-transform: translateZ(-5px); 
} 
.coin:hover { 
    -webkit-transform: rotateY(90deg); 
} 

所有我想知道的是如何將厚度應用於用戶可見的門。

Answer 1

您需要將-webkit-transform-style: preserve-3d;添加到'div.thumb'元素。