CSS Cube在變換後恢復到其初始狀態

我不是css的專家，我遵循不同的教程來源以創建使用css和html懸停的旋轉多維數據集。CSS Cube在變換後恢復到其初始狀態

懸停時，立方體平移並旋轉。但是，當它不再活動時，我希望立方體返回到原始位置。這怎麼能實現？

這是代碼。

HTML

.wrap { 
 
    -webkit-perspective: 800px; 
 
    perspective: 800px; 
 
    -webkit-perspective-origin: 50% 100px; 
 
    perspective-origin: 50% 100px; 
 
    float: left; 
 
    margin-right: 3.5px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
} 
 
.cube { 
 
    position: relative; 
 
    width: 80px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    margin: 0 auto; 
 
    margin-top: 30px; 
 
    -webkit-animation: spin 3s infinite linear; 
 
    animation: spin 3s infinite linear; 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
.cube div { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.back { 
 
    transform: translateZ(0px) rotateY(180deg); 
 
    background: #057e98; 
 
    opacity: 0.8; 
 
} 
 
.right { 
 
    transform: rotateY(-270deg) translateX(0px); 
 
    transform-origin: top right; 
 
    background: #16a8b8; 
 
    opacity: 0.8; 
 
} 
 
.left { 
 
    transform: rotateY(270deg) translateX(0px); 
 
    transform-origin: center left; 
 
    background: #c25e28; 
 
    opacity: 0.8; 
 
} 
 
.top { 
 
    transform: rotateX(-90deg) translateY(-50px); 
 
    -webkit-transform-origin: top center; 
 
    transform-origin: top center; 
 
    background: #c25e28; 
 
    opacity: 0.8; 
 
} 
 
.bottom { 
 
    transform: rotateX(90deg) translateY(0px); 
 
    transform-origin: bottom center; 
 
    background: blue; 
 
    opacity: 0.8; 
 
} 
 
.front { 
 
    transform: translateZ(50px); 
 
    background: #f47a2d; 
 
    opacity: 0.8; 
 
} 
 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: rotateY(0); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
} 
 
.cube:hover { 
 
    -webkit-animation-play-state: running; 
 
    animation-play-state: running; 
 
} 
 
.wrap:hover { 
 
    -webkit-transform: translate(3em, 5em); 
 
}

<div class="wrap"> 
 
    <div class="cube text-center"> 
 
    <div class="front"> 
 
    </div> 
 
    <div class="back"> 
 
    </div> 
 
    <div class="top"> 
 
    </div> 
 
    <!--<div class="bottom"> 
 
      </div>--> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="cube text-center"> 
 
    <div class="front"> 
 
    </div> 
 
    <div class="back"> 
 
    </div> 
 
    <div class="top"> 
 
    </div> 
 
    <!--<div class="bottom"> 
 
      </div>--> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    </div> 
 
    </div> 
 
</div>

問題是，當立方體停止轉動，它保持其當前狀態。我希望它恢復到原來的狀態。也就是說，如果它在「右」側顯示時停止旋轉，則應該在「前」側顯示時返回到其原始位置。

來源

2015-04-23 mokko211

喜歡的東西（HTTP [本？] //jsfiddle.net/jbutler483/L615cabk/） – jbutler483

@ jbutler483是的。如果從當前狀態平穩過渡到初始狀態將會很好。這可能嗎？ – mokko211

不容易。但我認爲最近的一個問題是關於這個問題的......我會看看我能否爲你挖掘它。像[this]（http://jsfiddle.net/u7vXT/）這最終使用額外的類和JavaScript – jbutler483

我覺得你需要像下面這樣。你必須申請以下的CSS：

這是因爲你暫停你的動畫animation-play-state: paused;不懸停時，它會停止動畫。

.wrap { 
 
    -webkit-perspective: 800px; 
 
     perspective: 800px; 
 
     -webkit-perspective-origin: 50% 100px; 
 
     perspective-origin: 50% 100px; 
 
     float:left; 
 
     margin-right: 3.5px; 
 
     -webkit-transition: 1s ease-in-out; 
 
     -moz-transition: 1s ease-in-out; 
 
     -o-transition: 1s ease-in-out;  
 
    } 
 

 
    .cube { 
 
     position: relative; 
 
     width: 80px; 
 
     -webkit-transform-style: preserve-3d; 
 
     transform-style: preserve-3d; 
 
     margin: 0 auto; 
 
     margin-top: 30px;   
 
     
 

 
    } 
 

 
    .cube div { 
 
     position: absolute; 
 
     width: 50px; 
 
     height: 50px; 
 
    } 
 

 
    .back { 
 
     transform: translateZ(0px) rotateY(180deg); 
 
     background: #057e98; 
 
     opacity: 0.8; 
 
    } 
 
    .right { 
 
     transform: rotateY(-270deg) translateX(0px); 
 
     transform-origin: top right; 
 
     background: #16a8b8; 
 
     opacity: 0.8; 
 
    } 
 
    .left { 
 
     transform: rotateY(270deg) translateX(0px); 
 
     transform-origin: center left; 
 
     background: #c25e28; 
 
     opacity: 0.8; 
 
    } 
 
    .top { 
 
     transform: rotateX(-90deg) translateY(-50px); 
 
     -webkit-transform-origin: top center; 
 
     transform-origin: top center; 
 
     background: #c25e28; 
 
     opacity: 0.8; 
 
    } 
 
    .bottom { 
 
     transform: rotateX(90deg) translateY(0px); 
 
     transform-origin: bottom center; 
 
     background: blue; 
 
     opacity: 0.8; 
 
    } 
 
    .front { 
 
     transform: translateZ(50px); 
 
     background: #f47a2d; 
 
     opacity: 0.8; 
 
    } 
 

 
    @-webkit-keyframes spin { 
 
     from { -webkit-transform: rotateY(0); -webkit-transform-origin: 20% 50% 0; } 
 
     to { -webkit-transform: rotateY(360deg); -webkit-transform-origin: 20% 50% 0;} 
 
    } 
 

 
@keyframes spin { 
 
     from { transform: rotateY(0); transform-origin: 20% 50% 0; } 
 
     to { transform: rotateY(360deg); transform-origin: 20% 50% 0;} 
 
    } 
 

 
    .cube:hover { 
 
    -webkit-animation: spin 3s infinite linear; 
 
     animation: spin 3s infinite linear; 
 
     -webkit-animation-play-state: running; 
 
     animation-play-state: running; 
 
    } 
 

 
    .wrap:hover{ 
 
     -webkit-transform: translate(3em,5em); 
 
     transform: translate(3em,5em); 
 
    }

<div class="wrap"> 
 
    <div class="cube text-center"> 
 
     <div class="front"> 
 
     </div> 
 
     <div class="back"> 
 
     </div> 
 
     <div class="top"> 
 
     </div> 
 
     <!--<div class="bottom"> 
 
     </div>--> 
 
     <div class="left"> 
 
     </div> 
 
     <div class="right"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="cube text-center"> 
 
     <div class="front"> 
 
     </div> 
 
     <div class="back"> 
 
     </div> 
 
     <div class="top"> 
 
     </div> 
 
     <!--<div class="bottom"> 
 
     </div>--> 
 
     <div class="left"> 
 
     </div> 
 
     <div class="right"> 
 
     </div> 
 
    </div> 
 
</div>

希望它能幫助。

來源

2015-04-23 11:58:34 ketan

是的。這是一個解決方案，但如果從當前狀態平穩過渡到初始狀態將會很好。 – mokko211

將其設置爲'animation-play-state：initial;'檢查http://jsfiddle.net/oo74ppgy/2/ – ketan

@ mokko211：轉換（而不是動畫）會導致平滑過渡回原始狀態，但我是害怕它不會對你有用，因爲你需要一個無限循環。有了動畫，反向效果需要反向動畫 - 就像我的[這個答案]（http://stackoverflow.com/questions/19251804/continuous-rotation-on-hover-exit/19252731#19252731）。但是，只有當你想要一個確切的事件逆轉。如果你只是想讓它順利返回，我認爲Ketan的第二個樣本會對你有好處。 – Harry

您可以創建一個在非懸停狀態下發生一次的迴轉動畫，但它會在頁面加載時發生一次（在發生任何事情之前）;

你可以有一個js聽者懸停添加此動畫克服的問題......（但是這是作弊）..

.wrap { 
 
    -webkit-perspective: 800px; 
 
    perspective: 800px; 
 
    -webkit-perspective-origin: 50% 100px; 
 
    perspective-origin: 50% 100px; 
 
    float: left; 
 
    margin-right: 3.5px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
} 
 
.cube { 
 
    position: relative; 
 
    width: 80px; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    margin: 0 auto; 
 
    margin-top: 30px; 
 
    -webkit-animation: spinback 3s 1 linear; 
 
    animation: spinback 3s 1 linear; 
 

 
    
 
} 
 
.cube div { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.back { 
 
    transform: translateZ(0px) rotateY(180deg); 
 
    background: #057e98; 
 
    opacity: 0.8; 
 
} 
 
.right { 
 
    transform: rotateY(-270deg) translateX(0px); 
 
    transform-origin: top right; 
 
    background: #16a8b8; 
 
    opacity: 0.8; 
 
} 
 
.left { 
 
    transform: rotateY(270deg) translateX(0px); 
 
    transform-origin: center left; 
 
    background: #c25e28; 
 
    opacity: 0.8; 
 
} 
 
.top { 
 
    transform: rotateX(-90deg) translateY(-50px); 
 
    -webkit-transform-origin: top center; 
 
    transform-origin: top center; 
 
    background: #c25e28; 
 
    opacity: 0.8; 
 
} 
 
.bottom { 
 
    transform: rotateX(90deg) translateY(0px); 
 
    transform-origin: bottom center; 
 
    background: blue; 
 
    opacity: 0.8; 
 
} 
 
.front { 
 
    transform: translateZ(50px); 
 
    background: #f47a2d; 
 
    opacity: 0.8; 
 
} 
 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: rotateY(0); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
} 
 
@-webkit-keyframes spinback { 
 

 
    from { 
 
    -webkit-transform: rotateY(360deg); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(0); 
 
    -webkit-transform-origin: 20% 50% 0; 
 
    } 
 
} 
 
.cube:hover { 
 
    -webkit-animation: spin 3s infinite linear; 
 
    animation: spin 3s infinite linear; 
 
} 
 
.wrap:hover { 
 
    -webkit-transform: translate(3em, 5em); 
 
}

<div class="wrap"> 
 
    <div class="cube text-center"> 
 
    <div class="front"> 
 
    </div> 
 
    <div class="back"> 
 
    </div> 
 
    <div class="top"> 
 
    </div> 
 
    <!--<div class="bottom"> 
 
      </div>--> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="cube text-center"> 
 
    <div class="front"> 
 
    </div> 
 
    <div class="back"> 
 
    </div> 
 
    <div class="top"> 
 
    </div> 
 
    <!--<div class="bottom"> 
 
      </div>--> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-04-23 13:37:36 maioman

CSS Cube在變換後恢復到其初始狀態

回答

相關問題