我不太擅长css3动画,所以我需要一些帮助来改进输出。
我正在努力实现windows8的瓷砖效果,我几乎完成了。
我正在努力实现这个目标
这里是jsfiddle
翻转的css如下。
后缀'1'表示块1,'2'表示块2,依此类推'til 5表示五个块。
/*block one*/
.flip-container1, .front1, .back1 {
position:relative;
width: 432px;
height: 140px;
}
.flipper1 {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front1, .back1 {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background: #2FB1BE;
}
.vertical1.flip-container1 {
position: relative;
}
.vertical1 .back1 {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical1.flip-container1 .flipper1 {
-webkit-transform-origin: 100% 70px;
-moz-transform-origin: 100% 70px;
transform-origin: 100% 70px;
}
@keyframes myFirst{
from{
webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to{
webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}
@-webkit-keyframes myFirst{
from{
webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to{
webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}
.vertical1.flip-container1 .flipper1{
animation:myFirst 3s;
-webkit-animation:myFirst 3s;
animation-direction:normal;
-webkit-animation-direction:normal;
animation-iteration-count:infinite;
}
现在我想解决以下两个问题:
我希望一次只翻转一个瓷砖。
目前,我已经应用了不同的动画时间,看起来很好,但多个瓷砖是翻转一次。
2-我希望特定平铺的动画在显示背面时停止,然后移动到另一个平铺,当再次轮到它时,则再次显示正面。目前,它显示正面,然后立即显示背面,然后暂停一段时间。
最佳答案
对于第一个问题,您需要使用:hover
伪标记,如果需要,还需要使用特定于tile的id。
我不太明白你说的“然后移动到另一个瓷砖,当它再次轮到,然后前面再次显示”是什么意思。但是,您已经将animation-iteration-count:
设置为infinite
,所以动画当然会无限地继续下去。
你似乎还不完全理解css动画/转换。也许你应该在鼠标悬停的时候练习让一个盒子变大,然后努力使一个盒子翻转。W3Schools对CSS Animations有很大的参考价值。