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

清疚 2021-07-24 19:17 506阅读 0赞

做法:
    	两个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>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20200621143113609.png]![在这里插入图片描述][20200621143122928.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621143056461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[20200621143113609.png]: https://img-blog.csdnimg.cn/20200621143113609.png
[20200621143122928.png]: https://img-blog.csdnimg.cn/20200621143122928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/b000656bde17437db3ebbbf0f46795b5.png