CSS3图片翻转效果

前端老徐图片翻转特效–正面
我是反面
@keyframes cardFront { 0%, 40%, 100% {
	opacity:1;
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
50%, 90% {
	opacity:1;
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-ms-transform:rotateY(-180deg);
	transform:rotateY(-180deg)
}
}

@keyframes cardBack { 0%, 40% ,100% {
	opacity:1;
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-ms-transform:rotateY(-180deg);
	transform:rotateY(-180deg)
}
50%, 90% {
	opacity:1;
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	transform:rotateY(0deg)
}
}
.fan{ width:300px; height:100px; position:relative;}
.fan div{ width:300px;height:100px; color:#fff;text-align:center;line-height:100px; position:absolute;left:0;top:0;backface-visibility:hidden;}
.f1{ background:red; animation:7s linear 2s normal both infinite running cardFront;}
.f2{ background:green; animation:7s linear 2s normal both infinite running cardBack;}
<div class="fan">
    <div class="f1">前端老徐图片翻转特效--正面</div>
    <div class="f2">我是反面</div>
</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>