我不是CSS方面的专家,因此我遵循了不同的教程资料,以便在使用css和html进行悬停时创建一个旋转的多维数据集。
悬停时,立方体平移并旋转。但是,当它不再处于活动状态时,我希望该多维数据集返回到此原始位置。如何做到这一点?
这是代码。
的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>
问题是当多维数据集停止旋转时,它将保持其当前状态。我希望它恢复到其原始位置和状态。也就是说,如果它停止旋转并显示“右侧”,则应返回到其原始位置并显示“正面”。
我认为您需要喜欢以下内容。您必须应用以下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>
希望能帮助到你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句