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在变换后恢复到其初始状态

回答

相关问题