使css3轉換總是在同一個方向旋轉

我想要有一個前/後面div總是在相同的方向翻轉。我用css和javascript實現了翻轉，但我很難考慮如何使它始終向右旋轉，而不是旋轉到右側，然後再回到左側。使css3轉換總是在同一個方向旋轉

我基本上是用一個div與follwing CSS

/* flip speed goes here */ 
    .flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px; 
    margin-left: 3px; 
    z-index: 3; 
    width: 160px; 
    height: 145px; 
    display:block; 
    }

，並在其上的用戶點擊我的班「翻轉」添加到其改變CSS來此股利：

 /* flip the pane when hovered */ 
    .flip-container.flipped .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    }

我應該只是總是增加旋轉角度？任何其他想法？

這是當前狀態，並在fiddle

來源

2013-01-08 tmaximini

http://jsfiddle.net/7WgKL/ 2/ – tmaximini

http://stackoverflow.com/questions/2584138/css3-continous-rotate-animation-just-like-a-loading-sundial看到這個？ –

嗨亞歷克斯，沒有沒有看到這個，但這並沒有真正回答我的問題。問題是當我從180度回到0度時，它會改變旋轉方向。 – tmaximini

完整的CSS我不認爲它可以用變換來完成。也許你可以用關鍵幀來做到這一點。一個類似的代碼：

@-webkit-keyframes rotate1 { 
    from {-webkit-transform: rotate(0deg)} 
    to {-webkit-transform: rotate(180deg)} 
} 
@-webkit-keyframes rotate2 { 
    from {-webkit-transform: rotate(180deg)} 
    to {-webkit-transform: rotate(360deg)} 
} 

#rotable { 
    background-color: red; 
    -webkit-animation-name: rotate2; 
    -webkit-animation-duration: 3s; 
    -webkit-transform: rotate(180deg); 
} 

#rotable:hover { 
    background-color: yellow; 
    -webkit-animation-name: rotate1; 
    -webkit-animation-duration: 3s; 
}

做了類似的事情，你想要的。注意轉向總是相同的。

另一個posibility，混合過渡和動畫（用於改變其中過渡會去在相反的方向...）

.container { 
 
    perspective: 500px; 
 
} 
 

 
.test { 
 
    transform: rotate(360deg); 
 
    transition: transform 4s; 
 
} 
 

 
.container:hover .test { 
 
    transform: rotateY(180deg); 
 
    animation: turn 4s; 
 
} 
 

 
@keyframes turn { 
 
    from {transform: rotate(0deg);} 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.test { 
 
    background-color: lightblue; 
 

 
}

<div class="container"> 
 
<div class="test">TEST</div> 
 
</div>

來源

2013-01-11 22:29:46 vals

沒有必要使用動畫，它確實可以通過轉換完成。當需要處理更復雜的時序問題時，動畫非常有用。在這樣一個簡單的例子中，只有一個開始和一個終點，轉換將是最有效的方式。此外，如果嘗試進行多次點擊來觸發動畫（我懷疑OP從懸停示例中複製代碼），這將會中斷（我認爲）。這個答案確實有一個有趣的動畫使用，儘管我認爲這是對其他問題有用的技巧。 – thisiate

@thisiate是的，當然可以檢查當前的變換旋轉並始終增加它。在我的回答中，我認爲固定樣式是OP想要的。無論如何，好點。 – vals

@vals肯定似乎是這樣。但是這樣做有點難以理解，因爲你的變量最終會被包裹（即使一個浮點數如此之大以至於幾乎不會發生）。應該有一個更乾淨的方式來做到這一點，但我還沒有找到它。 – clearlight

使css3轉換總是在同一個方向旋轉

回答

相關問題