css动画卡片翻转显示不同内容

最新推荐文章于 2022-12-05 13:52:01 发布

神奇大叔

最新推荐文章于 2022-12-05 13:52:01 发布

阅读量1.1k

点赞数 1

分类专栏： css动画进阶文章标签： css3

本文链接：https://blog.csdn.net/weixin_43294560/article/details/106885296

版权

css动画进阶专栏收录该内容

13 篇文章 1 订阅

订阅专栏

做法:
	两个div重叠,元素设置背面不可见属性,刚开始将第二个div绕y轴翻转180度不可见
	当鼠标放上父元素时,让两个子元素都旋转,设置第一个子元素绕y轴翻转180度不可见,让第二个子元素绕y轴翻转回0度可见

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<link rel="stylesheet" href="./index.css">
	<style>
		.box{
			width: 400px;
			height: 400px;
			border: solid 1px blueviolet;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 100px auto;
			perspective: 900px;
		}
		.box>div{
			width: 200px;
			height: 200px;
			position: absolute;
			background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 4em;
			transition: 2s;
			backface-visibility: hidden;
		}
		
		.box>div:nth-child(1){
			background-color: blue;
			transform: rotateY(0deg);
		}
		.box>div:nth-child(2){
			transform: rotateY(180deg);
			background-color: cadetblue;
		}
		.box:hover div:nth-child(1)
		{
			transform: rotateY(180deg);
			background-color: blue;
		}
		.box:hover div:nth-child(2)
		{
			transform: rotateY(0deg);
			background-color: cadetblue;
		}

		
		 
	</style>
	</head>
	<body class='me'>
		<div class='box'>
			<div>1</div>
			<div>2</div>
	

		</div>
		
	</body>
</html>

效果图:
在这里插入图片描述

神奇大叔

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css动画卡片翻转显示不同内容

做法: 两个div重叠,元素设置背面不可见属性,刚开始将第二个div绕y轴翻转180度不可见当鼠标放上父元素时,让两个子元素都旋转,设置第一个子元素绕y轴翻转180度不可见,让第二个子元素绕y轴翻转回0度可见代码示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href
复制链接

扫一扫