旋轉div與角度css3

Question

我有一個45度旋轉div。我試圖通過使用css3透視圖將其圍繞其y軸旋轉。它不像我想要的那樣懸停，它在盤旋時變成方形。我想在動畫結束時保持旋轉45度。

這裏是我的代碼：

<div class="perspective"> 
    <a href="#" class="box"> 
     <div class="innerbox"> 
      text 
     </div>  
    </a> 
</div> 

.perspective 
{ 
    position:relative; 
    width:100px; 
    height:100px; 
    margin:200px 0px 0px 200px; 
    -moz-perspective: 300px; 
    -webkit-perspective: 300px; 
    -o-perspective: 300px; 
    -ms-perspective: 300px; 
    perspective: 300px; 
} 

.box 
{ 
    width:80px; 
    height:80px;  
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    border: 5px solid #000; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 
    -ms-transition: all 800ms ease; 
    -o-transition: all 800ms ease; 
    transition: all 800ms ease; 
} 

.innerbox 
{ 
    margin:30px 0px 0px 20px; 
    -moz-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.box:hover 
{ 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    -webkit-transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 
    -ms-transition: all 800ms ease; 
    -o-transition: all 800ms ease; 
    transition: all 800ms ease; 
} 

我做出了榜樣http://jsfiddle.net/o6mo0rjq/

Answer 1

你最初是由繞Z軸旋轉45度.box。當您指定新的transform時，此初始旋轉將被覆蓋 - 因此對於:hover上的新旋轉，您還應指定原始旋轉。您的塊聲明然後將成爲：

.box:hover { 
    -moz-transform: rotateY(180deg) rotateZ(45deg); 
    -webkit-transform: rotateY(180deg) rotateZ(45deg); 
    -o-transform: rotateY(180deg) rotateZ(45deg); 
    -ms-transform: rotateY(180deg) rotateZ(45deg); 
    transform: rotateY(180deg) rotateZ(45deg); 
    -webkit-transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 
    -ms-transition: all 800ms ease; 
    -o-transition: all 800ms ease; 
    transition: all 800ms ease; 
} 

這裏是一個JSFiddle來演示。 （注意：transform中的訂單很重要！因爲這決定了旋轉應用於元素的順序，根據您應用的變換，這可能會給您不同的結果。）

希望這有助於您！如果您有任何問題，請告訴我。