CSS3实现卡片翻转动画效果

内容简介：CSS3实现卡片翻转动画效果

今天写项目的时候，想要实现卡片翻转的这样的一个效果，学习了一下，做个小笔记吧。

还是先放效果图，或者点击这里查看效果

实现

html

还是先放效果图，或者点击这里查看效果

<div class="box">
	<div class="card front"></div>
	<div class="card back"></div>
</div>

css

body{
			perspective: 1000px;
		}
		.box{
			margin: 50px auto;
		    width: 239px;
		    height: 334px;
		    position: relative;
		    transform-style: preserve-3d;
		    transition: transform 1s;
		}
		.card{
			display: block;
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  backface-visibility: hidden;
			  border-radius: 20px;
		}
		.front{
			background-image: url(1.jpg);
    		background-position: -24px -23px;
		}
		.back{
			transform: rotateY(180deg);
			background-image: url(1.jpg);
    		background-position: -287px -23px;
		}
		.flipped{
			transform: rotateY(180deg);
}

js

$(".box").hover(function(event){
	$(this).toggleClass("flipped");
})

关键说明

preserve-3d

因为需要3d效果，所以在box这个div里要添加如下，表示3d透视

这个加上很关键！

transform-style: preserve-3d;

backface-visibility

给卡片加入下方代码，表示隐藏被旋转div元素的背面，这样旋转之后，第一张卡片是背面朝屏幕方向，看不到，第二张卡片旋转之后则是正面朝像屏幕，即形成了旋转的效果，主要用到这两个属性啦。

backface-visibility:hidden

rotateY()

这里的旋转都是绕着Y轴旋转，比较好理解。

恩，就是这样，比较简单啦。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• 使用 Jetpack 卡片库在 Wear OS by Google 谷歌上创建自定义卡片
• 解锁卡片分类全过程
• canvas压缩图片以及卡片制作
• 跨平台开源卡片记忆工具 anki
• Flutter实现动画卡片式Tab导航
• iOS 自定义卡片式控件：QiCardView

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。